Удалить ненужные CSS Использование uncss в адаптивных сайтах

Question

У меня есть uncss (проект на github), чтобы удалить ненужные CSS для адаптивного сайта. Он также удаляет CSS, упомянутый в файле mobile.css, но который фактически влияет на сайт в мобильном представлении. Понятия не имею, как работает uncss? то есть погода, он просто удаляет селекторы, которых нет в DOM, или удаляет селекторы, которые не используются только в конкретном порте просмотра.

Answer 1

Медиа вариант - спасти:

options = { ... media : ['(min-width: 700px) handheld and (orientation: landscape)'], ... }

Из документации:

media (Array): по умолчанию UnCSS обрабатывает только таблицы стилей с медиа-запросом "all", "screen" и без него. Укажите здесь, какие другие включить.

Просто укажите точную опцию meida для mobile.css и наслаждайтесь правильной работой unCSS.

Answer 2

Из GitHub:

Как?

Процесс, с помощью которого UnCSS удаляет неиспользуемые правила, выглядит следующим образом:

1. HTML-файлы загружаются PhantomJS и выполняется JavaScript.
2. Используемые таблицы стилей извлекаются из полученного HTML.
3. Таблицы стилей объединяются, а правила анализируются с помощью css-parse.
4. document.querySelector отфильтровывает селекторы, которые не найдены в файлах HTML.
5. Остальные правила конвертируются обратно в CSS.

Так что да, он удаляет селекторы, отсутствующие в DOM во время выполнения. Если у вас есть динамически добавленные селекторы, вы можете заставить uncss игнорировать их, комментируя: /* uncss:ignore */ перед ними, например

/* uncss:ignore */
.selector1 {
    /* this rule will be ignored */
}