Узнайте, какие стили CSS используются на данной странице

У меня есть страница, содержащая несколько таблиц стилей, и большая часть стилей в ней фактически не используется на странице (устарела и т.д.). Я хотел бы экспортировать новую таблицу стилей, содержащую все стили на используемой странице. Есть ли способ сделать это?

ОТВЕТЫ

Ответ 1

Я думаю, что этот веб-сайт делает то, что вы хотите: CSS Trashman. Для запуска требуется немного времени, но он работает. Он уменьшил мой персональный CSS-сайт с 3,31 до 402 байта.

Если вы предпочитаете использовать инструмент командной строки, CSS Rationator поддерживает CSS Trashman.

Ответ 2

У меня была эта же проблема, осложняемая тем фактом, что страницы, которые мне нужны для анализа, являются только для входа в систему и для работы, поэтому я не могу предоставить свой логин внешнему приложению (каким образом unused-css.com сканирует страницы за стенкой входа).

Я обнаружил два расширения Chrome:

Я использовал только первый, так как это было хорошо. Он подсчитал элементы CSS на странице, рассказал мне, сколько из них использовалось и не использовалось, и позвольте мне загрузить таблицу стилей всех используемых элементов. Он, казалось, не включал в себя функциональность для просмотра вокруг сайта и накопления замеченных элементов, он был только поэтапно, но он все же позволил мне обрезать 450 до 150.

Ответ 3

В Chrome DevTools есть вкладка "Аудит", которая позволит вам запускать производительность веб-страницы аудит и просмотреть список неиспользуемых правил CSS:

введите описание изображения здесь

Ответ 4

Я нашел это: http://unused-css.com/

Функции

  • Исследуйте страницы своего сайта автоматически, найдите неиспользуемые селектор CSS и создайте новые чистые файлы CSS, которые вы можете скачать
  • Аутентификация и исследование страниц, требующих проверки подлинности. Затем он проверяет неиспользуемые правила CSS.
  • Поиск правил CSS в файлах javascript
  • Настроить список селекторов CSS, чтобы сохранить
  • Предварительный просмотр изменения, внесенного в файл CSS
  • Следуйте командам импорта CSS
  • Установить агент пользователя для искателя

Но я не уверен, что это была бы хорошая идея, например: javascript trigered selectors, контекстный дисплей, условный формат кода... Итак, будьте осторожны, если вы попытаетесь "пакетно" работать с вашими .css файлами.