Перейти до вмісту
TextArray1.41.0
100% локально

Пошук невикористовуваних селекторів CSS

Порівняйте таблицю стилів зі сторінкою HTML та отримайте список селекторів без збігів.

Введення
HTML
Вихід
Пов'язані інструменти
Калькулятор CSS специфічностіновийІнструменти розробника
Мініфікатор CSSІнструменти розробника
Перевірка доступності HTMLновийІнструменти розробника
ключ i18n дифІнструменти розробника
Конвертер TOML в JSONІнструменти розробника
SQL в JSONІнструменти розробника
Пошук невикористовуваних селекторів CSS
Вставте таблицю стилів на одну сторону та HTML, який вона оформляє, на іншу — і цей інструмент виведе кожний селектор, який не збігається ні з одним елементом на сторінці. Це швидкий спосіб знайти невикористовувані правила, залишені після редизайну, видалення компонента або місяців копіювання CSS — той вид безладу, який утомливо шукати вручну у файлі зі сотнями правил.
«Ігнорувати псевдо-класи та псевдо-елементи» порівнює правило типу .button:hover як простий .button, оскільки статичний знімок HTML не може показати стани наведення або фокуса; відключіть цю опцію, і інструмент перевірить ті, які він може безпечно перевірити — first-child, last-child, nth-child та not — на реальну позицію кожного елемента. «Ігнорувати селектори за шаблоном» приймає регулярний вираз або простий текстовий фрагмент як резервний варіант, щоб виключити класи, які скрипт перемикає під час виконання, такі як будь-який клас, що починається з js- або is-active, щоб вони ніколи не позначалися як невикористовувані. «Показати класи/ID HTML без правила CSS» переворотить порівняння, корисно для виявлення помилок у назвах класів. «Включити селектори всередину @media» перевіряє правила в медіа-запитах так само, як решту таблиці стилів, або пропускає їх при відключенні. Переключіть вивід на «Очищений CSS», щоб отримати таблицю стилів з видаленими всіма невикористовуваними правилами.
Порівняння виконується з HTML-структурою так, як вона написана — розмітка, введена скриптом після завантаження сторінки, відсутня у вставленому знімку, тому перевірте перед видаленням правила. Селектори, об'єднані комами, перевіряються окремо, тому правило, що охоплює два класи одночасно, видаляється лише після підтвердження того, що обидва класи не використовуються.
Все відбувається у вашому браузері: CSS та HTML, які ви вставляєте, ніколи не завантажуються куди-небудь. Скопіюйте результат, завантажте його як файл .txt або надішліть назад на вхід, щоб запустити ще один проход.
FAQ
Чи перевіряє він селектори всередину @media, @supports та @keyframes?
Селектори всередину @media перевіряються як будь-яке інше правило, з опцією їх пропуску, якщо ви надаєте перевагу. Інші правила @, такі як @font-face та @keyframes, не містять селекторів елементів для порівняння, тому вони залишаються без змін.
Чи може він перехопити класи, які JavaScript додає або видаляє?
Ні — зіставлення здійснюється з вставленим HTML, а не з живою сторінкою зі сценаріями. Використовуйте опцію ігнорування шаблону, щоб виключити класи, які ви знаєте, перемикаються JavaScript, такі як is-open або js-active, щоб вони не позначалися як невикористовувані.
Що відбувається з комбінаторами, такими як селектор нащадка або сусіда?
Інструмент слідує повному ланцюгу селекторів — нисхідний, дочірній, сусідній та загальний сусідній — проти структури вставленого HTML, а не лише фінальної назви класу.
Чому селектор, який я знаю, що використовується, все ще указаний як невикористовуваний?
Найчастіше HTML, який його використовує, не був вставлений, або він додається динамічно після завантаження сторінки. Вставте повну відрендеровану розмітку або виключіть селектор за допомогою опції ігнорування шаблону, якщо він застосовується скриптом.
Мій CSS або HTML завантажуються куди-небудь?
Ні. Порівняння виконується повністю у вашому браузері — ні таблиця стилей, ні розмітка, які ви вставляєте, ніколи не залишають ваш пристрій.