Перевірник CSS Реального Рендерингу Правила-ПереможцяВикористання двигуна браузера для перевірки правила CSS, що перемагає
Чому потрібен саме реальний рендеринг, а не лише розрахунок?
Більшість онлайн-калькуляторів специфічності CSS просто підставляють ваш селектор у формулу й видають число — наприклад, #main p отримує (1,0,1), а .card.active отримує (0,2,0). Але те, що насправді вирішує браузер, коли кілька правил конфліктують, залежить ще й від успадкування, порядку каскаду, !important, а також від того, як одна й та сама властивість записана в різних правилах — усе це теоретичні калькулятори повністю ігнорують. Цей інструмент працює інакше: він рендерить вставлені вами HTML і CSS у прихованому iframe, щоб браузер справді застосував стилі, а потім зчитує реальний результат за допомогою getComputedStyle(). Те, що ви бачите, — це те, що браузер дійсно вирішив, а не число, обчислене на папері.
Як насправді порівнюється показник (a, b, c) — розібраний приклад
Специфічність CSS записується як три числа (a, b, c): a — кількість ID-селекторів, b — кількість селекторів класів/атрибутів/псевдокласів, c — кількість селекторів типів/псевдоелементів. Порівняння працює як порівняння цифр — у кого вище 'a', той перемагає одразу, а до порівняння 'b' переходять лише тоді, коли 'a' однакове. Наприклад, #main p отримує (1,0,1), тоді як .card .title.active отримує (0,3,0) — #main p все одно перемагає, бо 1 > 0 за 'a', навіть якщо інший селектор накопичує три класи. Якщо специфічність двох правил абсолютно однакова, браузер застосовує те правило, яке визначене пізніше в CSS — тому порядок у вихідному коді також важливий. !important — єдине, що повністю скасовує специфічність: правило з нижчою специфічністю, але з !important, перемагає правило з вищою специфічністю без нього (якщо ж у обох правил є !important, специфічність знову вирішує результат).
Коли справді варто скористатися цим інструментом?
Класичний тригер — 'я написав це правило CSS, а на екрані нічого не змінилося' — це зазвичай означає, що інше правило з вищою специфічністю (або з !important) перекриває його. Вставте HTML+CSS, що конфліктують, вкажіть селектор елемента, який ви налагоджуєте, і інструмент виведе всі відповідні правила з їхньою специфічністю, а справжній двигун браузера скаже вам, яке з них дійсно перемагає — більше не потрібно вгадувати, який шар каскаду виграє.
Цей інструмент рендерить у межах ізольованого iframe без зовнішніх шрифтів, зображень чи виконання JavaScript, і не підтримує Shadow DOM або динамічно впроваджені стилі CSS-in-JS — вставляйте статичні фрагменти HTML/CSS для отримання точних результатів.