Как я могу извлечь только используемый CSS на данной веб-странице и объединить его в отдельную таблицу стилей?

У меня есть сайт, чьи таблицы стилей становятся подавляющими, а полные 50% -90% или около того не используются на определенных страницах. Вместо 23 отдельных блокирующих CSS-листов я бы хотел узнать, какие из них используются на странице, на которую я хотел бы настроить таргетинг, и экспортировать их в один лист.

Я видел несколько вопросов, которые рекомендуют "Dust me selectors" или аналогичные дополнения, на которых будут указаны, какие селекторы используются и которые не используются; но это не то, что я хочу. Мне нужно иметь возможность экспортировать все используемые стили из всех листов для этой конкретной страницы в один новый лист, который можно использовать для замены 23 других. Решение должно иметь возможность поддерживать отзывчивый веб-сайт (медиазвонки). Страница веб-сайта, на которую я нацелен, - это http://tripinary.com.

Я нашел: https://unused-css.com, но это платная услуга, и мне нужно бесплатно;

Следующая ближайшая вещь, с которой я столкнулся, - http://www.csstrashman.com/, но это не смотрит на таблицы стилей. Фактически, он полностью игнорирует их, и в конечном итоге у меня возникают проблемы с отзывчивостью сайта. Много раз, этот сайт просто падает.

Я не против программного решения, если кто-то должен был сделать это раньше и может рекомендовать направление.

Ответы

Ответ 1

(удалил мой комментарий в ответ RwwL, чтобы сделать его тщательным ответом)

UnCSS, будь то node.js или как задача grunt или gulp, может перечислить используемые правила CSS массивом страниц в массиве Media Queries.

uncss: https://github.com/giakki/uncss
grunt-uncss: https://github.com/addyosmani/grunt-uncss
gulp -uncss: https://github.com/ben-eb/gulp-uncss

многостраничный:

Вы можете передать files в качестве аргумента для любого из трех плагинов, например:

var files   = ['my', 'array', 'of', 'HTML', 'files'],
    options = { /* (…) */ };

uncss(files, options, function (error, output) {
    console.log(output);
});

Избегайте:

URL-адреса (массив):
    массив URL-адресов для загрузки с помощью Phantom (поверх файлов, уже прошедших, если они есть).
    ПРИМЕЧАНИЕ. Эта функция устарела, вы можете передавать URL-адреса непосредственно в качестве аргументов.


Запросы на средства массовой информации и учитываются:

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

Вы можете добавлять таблицы стилей, игнорировать некоторые из них, добавлять встроенные CSS и многие другие параметры, такие как htmlroot


Остальные проблемы:

1/ Условные классы, если вы используете их для IE9-. Очевидно, что они не будут сопоставлены в среде WebKit PhantomJS!

HTML:
<!--[if IE 9]><html class="ie9 lte-ie9" lang="en"><![endif]--> <!-- teh conditional comment/class -->

CSS:
.ie9 .some-class { property: value; ] /* Only matched in IE9, not WebKit PhantomJS */

Должны ли они добавляться вручную или script в элемент html в тестовой среде? (то, как это делает, не имеет значения)
Есть ли опция в uncss?
Пока вы не используете стиль :not(.ie9) (странный), это должно быть хорошо.

EDIT: вы можете использовать опцию игнорировать с шаблоном чтобы заставить uncss "предоставить список селекторов, которые не должны удаляться UnCSS" . Не будет проверено.

2/ Скрипты, которые будут определять разрешение (ширина видового экрана) и адаптировать к нему контент, удаляя/добавляя его или добавляя класс в контейнер. Они будут выполняться в PhantomJS в разрешении рабочего стола, я думаю, и поэтому не буду выполнять свою работу, поэтому вам нужно будет изменить вызовы на PhantomJS или что-то в этом роде... Или загляните в опции или проблемы GitHub из трех проектов (я не " т)

Другие инструменты, о которых я слышал, не тестировались или едва или не могли протестировать, не знаю о части MQ:

  • в grunt-uncss readme, часть покрытия
  • ucss из Opera (там уже есть ответ, не удалось заставить его работать)
  • Гелий
  • CSSESS
  • mincss

У Адди Османи есть бесчисленные презентации с более чем 100 слайдами, в которых представлены такие потрясающие инструменты, как этот: https://speakerdeck.com/addyosmani/automating-front-end-workflow (вы пожалеете еще больше, что дни сделаны только из 24 часов, а не 48 err wait 72 ^^)

Ответ 2

Как насчет Плагин использования CSS для Firebug?

Шаги:

  • Посетите свою страницу в Firefox
  • Вкладка "Использование CSS" в Firebug
  • Нажмите кнопку "Сканировать"
  • Нажмите жирное имя файла
  • Сохранить страницу селекторов CSS на диск

Вот несколько снимков экрана и пройдите. Не уверен насчет медиа-запросов или если он будет работать на вашем сайте, и он, вероятно, не сохранит -webkit и т.д., Но, возможно, он поможет вам в этом.

Ответ 3

Opera Software выпустила сканер CSS в Github, который утверждает, что может найти неиспользуемые и дублирующие селектора. Это может сделать трюк, если вам удобно использовать инструмент командной строки. https://github.com/operasoftware/ucss

Ответ 4

Вы можете проверить в Google Chrome, выполнив проверку элемента (F12). В неиспользуемом CSS есть строка над тегами.

Ответ 5

Если вы хотите, вы можете попытаться создать script, который выполняется на (непроизводственном) сервере, который проходит через каждое правило css, удаляет его из таблицы стилей, загружает страницу с помощью чего-то вроде phantomjs и проверяет на см., если что-либо изменилось с момента последнего загрузки страницы. Если это так, то верните правило css, если нет, затем оставьте его и перейдите к следующему правилу. Это займет некоторое время, но это сработает. Вам также потребуется настроить экземпляр вашего сервера, который не использует кеширование для его запуска.

Ответ 6

Попробуйте использовать этот инструмент, который представляет собой простой js-скрипт https://github.com/shashwatsahai/CSSExtractor/. Этот инструмент помогает получить CSS с определенной страницы, содержащей список всех источников для активных стилей, и сохранить его в JSON с источником как Ключ и правила как ценность. Он загружает весь CSS из ссылок href и сообщает все стили, примененные к ним. Вы можете изменить код, чтобы сохранить все CSS в файле .css. Тем самым объединяя все ваши CSS.