Есть ли способ проверить, какие стили CSS используются или не используются на веб-странице?

121

Хотите знать, какие стили CSS в настоящее время используются на веб-странице.

css

2

Используйте браузер с инспектором CSS. Safari и Chrome (также известный как Webkit) предоставляют это как часть инструментов разработчика. В Firefox это обеспечивается плагином Firebug. Насколько мне известно, в Internet Explorer нет ничего похожего. Инспектор позволит вам выбрать элемент, щелкнуть правой кнопкой мыши и выбрать «Проверить элемент» - затем он покажет вам, какие селекторы и какие отдельные правила применяются к выбранному элементу.

— Ли

Панель инструментов разработчика @Lee ie8 ведет себя так же, как firebug в селекторах css, вы можете выбрать и увидеть стили, примененные справа.

— kobe

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

— cweiske

58

Установите надстройку CSS Usage для Firebug и запустите ее на этой странице. Он сообщит вам, какие стили используются и не используются на этой странице.

— Коби
источник

@ Гарри, как только вы установите этот плагин, он будет на вкладке как часть firebug, где у вас есть сеть и все // // дайте мне знать, если вам что-то еще понадобится

— kobe

33

Есть ли что-нибудь подобное в Chrome?

— Педро Луз

3

Похоже, что это больше не работает и, к сожалению, больше не поддерживается.

— nostromo

1

Помните, что Firebug больше не поддерживается. Я думаю, что это дополнение не работает со встроенными в Firefox DevTools.

— Эндрю

Вы можете использовать опцию аудита в chrome во время проверки. Это покажет только css, который не используется на этой конкретной странице.

— Сарат Хари

81

В Google Chrome есть два способа проверить неиспользуемый CSS .

1. Вкладка "Аудит": > Щелкните правой кнопкой мыши + проверьте элемент на странице, найдите вкладку «Аудит» и запустите аудит, убедившись, что установлен флажок «Производительность веб-страницы».

Список всех неиспользуемых тегов CSS - см. Изображение ниже.

Обновление: - - - - - - - - - - - - - - ИЛИ - - - - - - - - - - - - - -

2. Вкладка «Покрытие»: > Щелкните правой кнопкой мыши + осмотрите элемент на странице, найдите три точки справа (обведены на изображении) и откройте панель консоли (или нажмите Esc), наконец, щелкните три точки слева в ящике (обведены на изображении), чтобы открыть инструмент покрытия.

Chrome запустил инструмент для просмотра неиспользуемых CSS и JS - Chrome 59 Update. Позволяет запускать и останавливать запись (красный квадрат на изображении), чтобы лучше охватить взаимодействие с пользователем на странице.

Показывает все используемые и неиспользуемые CSS / JS в файлах - см. Изображение ниже.

— Корделл
источник

3

Было бы здорово увидеть, какие из них тоже используются .... но это здорово, спасибо.

— Serj Sagan

Насколько я могу судить, если вы хотите знать, что используется, лучше всего установить плагин для Chrome - извините

— Корделл

Новое обновление Chrome 59 позволяет вам видеть использованные / неиспользуемые CSS и JS

— Корделл

Какую библиотеку для этого использует Chrome?

— Алексей

1

@UMAR, multi-page website coverage == (single-page coverage) * n где n = каждая страница на веб-сайте . Отнесение инструмента / этого ответа к категории «бесполезных» никому не приносит пользы.

— Шай Коэн

40

Просто для полноты и потому, что об этом спрашивали в комментариях - теперь в Chrome для той же цели есть инструмент аудита CSS . Некоторые подробности здесь:

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

— Ян Петцольд
источник

3

Я не уверен, что «инструмент аудита CSS», о котором идет речь в этом ответе, совпадает с вкладкой « Аудит » в инструментах разработчика Chrome, но он расскажет вам, какие правила CSS не используются (например, «Some.css: 42% не используется текущей страницей. ").

— Кенни Эвитт

11

Взгляните на UnCSS . Это помогает в создании файла CSS используемого CSS.

— Роберт Бризита
источник

1

Это отличная программа. Спасибо! Роб

— r0berts

1

Хороший веб-инструмент для разовых работ. ty

— billynoah

1

Это потрясающе - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- неважно .......

— Брайан Пауэлл

@ brian-powell да, сначала нужно сгенерировать вывод шаблонов. Как еще UnCSS узнает, что нужно?

— Роберт Бризита

8

Я использую CSS Dig . Он сделан для хрома, но я считаю, что это отличный инструмент!

— cs.matyi
источник

Я просто попробовал это - он все делает, звоня домой на cssdig.com, поэтому он не может видеть или анализировать что-либо, размещенное локально.

— Brilliand

0

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

— Шашват Сахай
источник

0

Без каких-либо сторонних инструментов и приложений вы можете найти неиспользуемые CSS и javascript, используя инструменты Chrome dev на вкладке покрытия. прочтите сообщение ниже от разработчиков Google. вкладка хромового покрытия

— Махди Сафари
источник