CSS-Spezifitäts-Echtrendering-CheckerBrowser-Engine zur Überprüfung der gewinnenden CSS-Regel verwenden

Warum muss hier tatsächlich gerendert werden – und nicht nur berechnet?

Die meisten CSS-Spezifitätsrechner im Netz setzen Ihren Selektor einfach in eine Formel ein und spucken einen Wert aus – z. B. erhält #main p den Wert (1,0,1) und .card.active den Wert (0,2,0). Doch was ein echter Browser entscheidet, wenn mehrere Regeln kollidieren, hängt zusätzlich von Vererbung, der Kaskadenreihenfolge, !important und davon ab, wie dieselbe Eigenschaft in verschiedenen Regeln geschrieben ist – all das ignorieren theoretische Rechner. Dieses Tool geht anders vor: Es rendert Ihr eingefügtes HTML und CSS in einem verborgenen iframe, sodass der Browser die Stile wirklich anwendet, und liest das tatsächliche Ergebnis anschließend mit getComputedStyle() aus. Was Sie sehen, ist die echte Entscheidung des Browsers – kein auf dem Papier errechneter Wert.

Wie der Wert (a, b, c) tatsächlich verglichen wird – ein Beispiel

Die CSS-Spezifität wird als drei Zahlen (a, b, c) angegeben: a zählt ID-Selektoren, b zählt Klassen-/Attribut-/Pseudoklassen-Selektoren, c zählt Typ-/Pseudoelement-Selektoren. Der Vergleich funktioniert wie ein Ziffernvergleich – wer bei 'a' die höhere Zahl hat, gewinnt sofort, und nur bei Gleichstand bei 'a' wird 'b' verglichen. Zum Beispiel erhält #main p den Wert (1,0,1), während .card .title.active den Wert (0,3,0) erhält – #main p gewinnt trotzdem, weil 1 > 0 bei 'a' gilt, obwohl der andere Selektor drei Klassen stapelt. Sind zwei Regeln exakt gleich spezifisch, wendet der Browser die später im CSS definierte Regel an – deshalb spielt auch die Reihenfolge im Quellcode eine Rolle. !important ist das einzige Mittel, das die Spezifität komplett aushebelt: Eine Regel mit niedrigerer Spezifität, aber mit !important, schlägt eine Regel mit höherer Spezifität ohne !important (haben beide Regeln !important, entscheidet wieder die Spezifität).

Wann sollten Sie tatsächlich zu diesem Tool greifen?

Der klassische Auslöser ist: 'Ich habe diese CSS-Regel geschrieben, und auf dem Bildschirm hat sich nichts verändert' – das bedeutet meist, dass eine andere Regel mit höherer Spezifität (oder !important) sie überschreibt. Fügen Sie das widersprüchliche HTML+CSS ein, geben Sie den Selektor des Elements ein, das Sie untersuchen, und das Tool listet jede passende Regel mit ihrem Spezifitätswert auf und lässt die echte Browser-Engine entscheiden, welche Regel tatsächlich gewinnt – kein Rätselraten mehr, welche Kaskadenebene sich durchsetzt.

Dieses Tool rendert innerhalb eines isolierten iframes ohne externe Schriftarten, Bilder oder JavaScript-Ausführung und unterstützt weder Shadow DOM noch dynamisch eingefügte CSS-in-JS-Stile – fügen Sie statische HTML/CSS-Ausschnitte ein, um genaue Ergebnisse zu erhalten.