Есть ли хорошие подходы, чтобы помочь определить неиспользуемые определения CSS в проекте? Куча css-файлов была загружена, и теперь я пытаюсь кое-что почистить.
Есть ли хорошие подходы, чтобы помочь определить неиспользуемые определения CSS в проекте? Куча css-файлов была загружена, и теперь я пытаюсь кое-что почистить.
Ответы:
Взгляните на расширение Firefox Dust-Me по адресу https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ .
В Chrome Developer Tools есть вкладка Audits, на которой могут отображаться неиспользуемые селекторы CSS.
Запустите аудит, затем в разделе Производительность веб-страницы см. Раздел Удаление неиспользуемых правил CSS.
Я только что нашел этот сайт - http://unused-css.com/
Выглядит хорошо, но мне нужно тщательно проверить выводимый «чистый» css, прежде чем загружать его на любой из моих сайтов.
Также, как и со всеми этими инструментами, мне нужно было убедиться, что он не удаляет идентификаторы и классы без стиля, а используется как селекторы JavaScript.
Содержание ниже взято с http://unused-css.com/, поэтому поблагодарите их за рекомендации других решений:
Латыш Сегал написал приложение для Windows для поиска и удаления неиспользуемых классов CSS. Я не проверял это, но из описания, вы должны указать путь к вашим HTML-файлам и один CSS-файл. Затем программа выведет список неиспользуемых селекторов CSS. На скриншоте видно, что нет способа экспортировать этот список или загрузить новый чистый файл CSS. Также похоже, что сервис ограничен одним файлом CSS. Если у вас есть несколько файлов, которые вы хотите очистить, вы должны очистить их один за другим.
Dust-Me Selectors - это расширение Firefox (для версии 1.5 или новее), которое находит неиспользуемые селекторы CSS. Он извлекает все селекторы из всех таблиц стилей на странице, которую вы просматриваете, а затем анализирует эту страницу, чтобы увидеть, какие из этих селекторов не используются. Затем данные сохраняются, чтобы при тестировании последующих страниц селекторы можно было вычеркнуть из списка по мере их появления. Предполагается, что этот инструмент сможет создать паук для всего сайта, но я, к сожалению, могу заставить его работать. Кроме того, я не верю, что вы можете настроить и загрузить файл CSS с удаленными стилями.
Topstyle - это приложение для Windows, включающее набор инструментов для редактирования CSS. Я не проверял это много, но похоже, что он имеет возможность удалять неиспользуемые селекторы CSS. Это программное обеспечение стоит 80 долларов США.
Liquidcity CSS cleaner - это php-скрипт, который использует регулярные выражения для проверки стилей одной страницы. Он скажет вам классы, которые не доступны в коде HTML. Я не проверял это решение.
Дедвейт - это инструмент покрытия CSS. Учитывая набор таблиц стилей и набор URL-адресов, он определяет, какие селекторы действительно используются, и списки, которые можно «безопасно» удалить. Этот инструмент является модулем ruby и будет работать только с сайтом rails. Неиспользуемые селекторы должны быть вручную удалены из файла CSS.
Helium CSS - это инструмент javascript для обнаружения неиспользуемого CSS на многих страницах веб-сайта. Сначала вы должны установить файл javascript на страницу, которую хотите протестировать. Затем вы должны вызвать функцию гелия, чтобы начать очистку.
UnusedCSS.com - это веб-приложение с простым в использовании интерфейсом. Введите URL-адрес сайта, и вы получите список селекторов CSS. Для каждого селектора число указывает, сколько раз селектор используется. Эта услуга имеет несколько ограничений. Оператор @import не поддерживается. Вы не можете настроить и загрузить новый чистый файл CSS.
CSSESS - это букмарклет, который поможет вам найти неиспользуемые селекторы CSS на любом сайте. Этот инструмент довольно прост в использовании, но он не позволит вам настраивать и загружать чистые файлы CSS. В нем будут перечислены только неиспользуемые файлы CSS.
Google Page Speed может сделать это за вас (на самом деле она делает гораздо больше, чем просто сообщает вам, какой CSS не используется). На FireFox он доступен как дополнение к FireBug. Тогда есть онлайн-версия тоже.
Лучший CSS Minifier в C # сбрасывает избыточные стили;
Вы также хотели бы использовать Dust-Me с этим.
Имейте в виду, что если какой-либо контент в данный момент не виден пользователям пыли, вы можете выбросить нужные вам стили.
РЕДАКТИРОВАТЬ: ссылка была сломана, но archive.org содержит и страницу, и код.
Расширение Firebug для просмотра того, какие правила CSS действительно используются.
CSS Usage - это расширение для Firebug (поэтому необходимо иметь установленный Firebug), которое позволяет вам знать неиспользуемые правила стиля CSS. Он идентифицирует CSS, который вы используете и не используете. Это позволяет указать, какие ненужные детали можно удалить. Вам обязательно следует использовать это дополнение, чтобы ваши CSS-файлы были как можно более легкими.
Похоже, что кто-то обновил DustMe Selectors для работы с Firefox снова под новым именем - «Сводка новостей CSS» http://blog.brothersmorrison.com/?p=198
Используйте панель инструментов разработчика Internet Explorer , s Вид> Соответствия селектора CSS : просмотр отчета обо всех установленных правилах стиля и количестве их использования на текущей странице.
Проверьте Google PageSpeed для Firefox . Это делает это, и целый груз больше.
По-видимому, плагин для Chrome также находится в стадии разработки.