Чи є спосіб перевірити, які стилі CSS використовуються чи не використовуються на веб-сторінці?

121

Хочете дізнатися, які стилі CSS зараз використовуються на веб-сторінці.

css

2

Використовуйте браузер із інспектором CSS. Safari та Chrome (він же Webkit) надають це як частину інструментів для розробників. У Firefox це передбачено плагіном Firebug. У Internet Explorer немає нічого подібного, про що я знаю. Інспектор дозволить вам вибрати елемент, клацнути правою кнопкою миші та вибрати "Перевірити елемент" - тоді він покаже, які селектори та які окремі правила застосовуються до обраного вами елемента.

— Лі

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

— кобе

можливий дублікат Вилучення лише CSS, який використовується на певній сторінці

— cweiske

58

Встановіть надбудову CSS Usage для Firebug та запустіть її на цій сторінці. Він розповість, які стилі використовуються, а не використовуються цією сторінкою.

— кобе
джерело

@Harry, як тільки ви встановите цей плагін, він буде знаходитись на вкладці як частина firebug, де у вас є мережа та всі //// дайте мені знати, якщо вам потрібно щось інше

— kobe

33

Чи є щось подібне до Chrome?

— Педро Луз

3

Схоже, це більше не працює і, на жаль, більше не підтримується.

— nostromo

1

Остерігайтеся, щоб Firebug більше не підтримувався. Я думаю, що ця надбудова не працює з вбудованим Firefox DevTools.

— Андрій

Ви можете використовувати параметр аудиту в хромі під час огляду. Це показник лише показує CSS, який не використовується на цій конкретній сторінці.

— Сарат Харі

81

У Google Chrome є два способи перевірити наявність невикористаних CSS .

1. Вкладка "Аудит": > Клацніть правою кнопкою миші + Перевірити елемент на сторінці, знайдіть вкладку "Аудит" та запустіть аудит, переконайтесь, що "Ефективність веб-сторінки" встановлено.

Список усіх невикористаних тегів CSS - див. Зображення нижче.

Оновлення: - - - - - - - - - - - - АБО - - - - - - - - - - - - - - -

2. Вкладка покриття: > Клацніть правою кнопкою миші + Огляньте елемент на сторінці, знайдіть три крапки праворуч (обведено зображенням) і відкрийте ящик консолі (або натисніть Esc) і, нарешті, натисніть на три крапки ліворуч у шухляді (обведено колом на зображенні), щоб відкрити інструмент Покриття.

Chrome запустив інструмент для перегляду невикористаних CSS та JS - Оновлення Chrome 59 Дозволяє запускати та зупиняти запис (червоний квадрат на зображенні), щоб забезпечити краще висвітлення роботи користувачів на сторінці.

Показує всі використані та невикористані CSS / JS у файлах - див. Зображення нижче.

— Кордел
джерело

3

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

— Serj Sagan

Наскільки я можу сказати, якщо ви хочете знати, що використовується, найкраще встановити плагін для Chrome - вибачте

— Cordell

Нове оновлення Chrome 59 дозволяє побачити використані / невикористані CSS та JS

— Cordell

Яку бібліотеку використовує 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% не використовується поточною сторінкою. ").

— Кенні Evitt

11

Погляньте на UnCSS . Це допомагає створити CSS-файл використовуваного CSS.

— Роберт Брізіта
джерело

1

Це чудова програма. Дякую! Роб

— r0berts

1

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

— billynoah

1

Це aweso - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- nevermind .......

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

@ brian-powell yep, вихід шаблонів повинен бути сформований спочатку. Як інакше 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, використовуючи інструменти хромованого розробника на вкладці покриття. читайте публікацію нижче від розробників google. вкладка хромованого покриття

— Махді Сафарі
джерело