Sprawdzarka CSS Rzeczywistego Renderowania Wygrywającej RegułyUżyj silnika przeglądarki, aby sprawdzić, która reguła CSS wygrywa
Czemu potrzebne jest rzeczywiste renderowanie, a nie tylko obliczenia?
Większość internetowych kalkulatorów specyficzności CSS po prostu wstawia twój selektor do wzoru i wypluwa wynik — np. #main p otrzymuje (1,0,1), a .card.active otrzymuje (0,2,0). Jednak to, co rzeczywiście decyduje o wygranej reguły w prawdziwej przeglądarce, gdy kilka reguł ze sobą konkuruje, zależy również od dziedziczenia, kolejności kaskady, !important oraz od tego, jak ta sama właściwość jest zapisana w różnych regułach — to wszystko teoretyczne kalkulatory ignorują. To narzędzie działa inaczej: renderuje wklejony przez ciebie HTML i CSS w ukrytym iframe, tak aby przeglądarka faktycznie zastosowała style, a następnie odczytuje prawdziwy wynik za pomocą getComputedStyle(). To, co widzisz, jest tym, co przeglądarka naprawdę zdecydowała — a nie liczbą wyliczoną na papierze.
Jak faktycznie porównywany jest wynik (a, b, c) — przykład rozwiązany krok po kroku
Specyficzność CSS zapisywana jest jako trzy liczby (a, b, c): a liczy selektory ID, b liczy selektory klas/atrybutów/pseudoklas, c liczy selektory typów/pseudoelementów. Porównanie działa jak porównywanie cyfr — kto ma wyższe 'a', wygrywa od razu, a do porównania 'b' przechodzi się tylko wtedy, gdy 'a' jest równe. Na przykład #main p otrzymuje (1,0,1), a .card .title.active otrzymuje (0,3,0) — #main p mimo to wygrywa, bo 1 > 0 dla 'a', nawet gdy drugi selektor gromadzi trzy klasy. Jeśli dwie reguły mają dokładnie taką samą specyficzność, przeglądarka zastosuje tę, która została zdefiniowana później w CSS — dlatego kolejność w kodzie źródłowym również ma znaczenie. !important jest jedyną rzeczą, która całkowicie unieważnia specyficzność: reguła o niższej specyficzności, ale z !important, wygrywa z regułą o wyższej specyficzności bez niego (chyba że druga reguła również ma !important — wtedy ponownie decyduje specyficzność).
Kiedy naprawdę warto skorzystać z tego narzędzia?
Klasyczny przypadek to: 'napisałem tę regułę CSS, a na ekranie nic się nie zmieniło' — co zwykle oznacza, że inna reguła o wyższej specyficzności (lub z !important) ją nadpisuje. Wklej konfliktujące HTML+CSS, wpisz selektor elementu, który debugujesz, a narzędzie wypisze wszystkie odpowiadające reguły z ich wynikiem specyficzności, pozwalając prawdziwemu silnikowi przeglądarki zdecydować, która reguła naprawdę wygrywa — koniec z zgadywaniem, która warstwa kaskady zwycięża.
To narzędzie renderuje zawartość w izolowanym iframe, bez zewnętrznych czcionek, obrazów czy wykonywania JavaScriptu, i nie obsługuje Shadow DOM ani dynamicznie wstrzykiwanych stylów CSS-in-JS — wklej statyczne fragmenty HTML/CSS, aby uzyskać dokładne wyniki.