CSS-Specificiteit Echt Renderen Winnende Regel CheckerBrowser-engine gebruiken om te verifiëren welke CSS-regel wint

Waarom moet dit echt gerenderd worden, en niet alleen berekend?

De meeste CSS-specificiteitscalculators online stoppen je selector simpelweg in een formule en spugen een score uit — bijvoorbeeld, #main p krijgt (1,0,1) en .card.active krijgt (0,2,0). Maar wat een echte browser beslist wanneer meerdere regels conflicteren, hangt ook af van overerving, de volgorde van de cascade, !important, en hoe elke eigenschap in verschillende regels is geschreven — dit alles wordt door theoretische calculators genegeerd. Deze tool pakt het anders aan: het rendert je geplakte HTML en CSS in een verborgen iframe, zodat de browser de stijlen echt toepast, en leest daarna het werkelijke resultaat uit met getComputedStyle(). Wat je ziet, is wat de browser écht heeft besloten — geen cijfer dat op papier is berekend.

Hoe de score (a, b, c) daadwerkelijk wordt vergeleken — een uitgewerkt voorbeeld

CSS-specificiteit wordt geschreven als drie getallen (a, b, c): a telt ID-selectors, b telt klasse-/attribuut-/pseudo-klasse-selectors, c telt type-/pseudo-elementselectors. Vergelijken werkt als het vergelijken van cijfers — wie de hoogste 'a' heeft, wint direct, en je vergelijkt 'b' alleen als 'a' gelijk is. Bijvoorbeeld, #main p krijgt (1,0,1) terwijl .card .title.active (0,3,0) krijgt — #main p wint toch, omdat 1 > 0 is voor 'a', ook al stapelt de andere selector drie klassen. Als twee regels precies gelijke specificiteit hebben, past de browser de regel toe die later in de CSS is gedefinieerd — daarom is de volgorde in de broncode ook belangrijk. !important is het enige dat specificiteit volledig kan overrulen: een regel met lagere specificiteit maar met !important wint van een regel met hogere specificiteit zonder !important (tenzij de andere regel ook !important heeft, in welk geval specificiteit opnieuw de doorslag geeft).

Wanneer zou je deze tool daadwerkelijk moeten gebruiken?

De klassieke aanleiding is: 'ik heb deze CSS-regel geschreven en er verandert niets op het scherm' — dit betekent meestal dat een andere regel met hogere specificiteit (of !important) deze overschrijft. Plak de conflicterende HTML+CSS, voer de selector in van het element dat je aan het debuggen bent, en de tool toont alle overeenkomende regels met hun specificiteitsscore, en laat de echte browser-engine bepalen welke regel daadwerkelijk wint — geen giswerk meer over welke cascadelaag wint.

Deze tool rendert binnen een geïsoleerde iframe zonder externe lettertypen, afbeeldingen of JavaScript-uitvoering, en ondersteunt geen Shadow DOM of dynamisch geïnjecteerde CSS-in-JS-stijlen — plak statische HTML/CSS-fragmenten voor nauwkeurige resultaten.