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

Question

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

Answer 1

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

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

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

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

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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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