Kaskaden-Visualizer: welche Regel gewinnt – und an welcher Stufe

Was die drei Herkünfte bedeuten

Der Browser bringt sein eigenes Stylesheet mit – es macht h1 groß, a blau und unterstrichen, ul eingerückt. Der Nutzer kann ein eigenes Stylesheet hinterlegen, etwa für größere Schrift oder höheren Kontrast; die meisten Browser bieten dafür eine Einstellung oder eine Erweiterung. Der Autor ist die Website selbst: alle Stylesheets, die das Dokument einbindet, und jedes style-Attribut. Ohne !important steht der Autor ganz oben, weil die Website ihre eigene Gestaltung bestimmen soll; mit !important steht der Nutzer oben, weil seine Bedürfnisse Vorrang haben. Im Visualizer lässt sich das an der ersten Auswahlbox jeder Zeile umstellen.

So liest man das Ergebnis

Die Liste unter den Eingaben ist die sortierte Kaskade. Durchgestrichene Zeilen sind ausgeschieden, die getönte Zeile gewinnt. Das Tupel rechts ist die Spezifität nach CSS 2.1; die Spalte daneben nennt die Herkunft. Die Anzeige darunter sagt, in welcher Stufe die Entscheidung fiel: Stufe 2 heißt Herkunft oder !important, Stufe 3 Spezifität, Stufe 4 Reihenfolge.

Drei Versuche, die den Mechanismus zeigen: !important an der Browser-Regel setzen – sie verliert trotzdem gegen eine Autor-Regel mit !important, gewinnt aber gegen alle ohne. Die Herkunft der ersten Zeile auf Nutzer stellen und !important setzen – sie schlägt jetzt jede Autor-Regel. Zwei Zeilen mit identischem Selektor anlegen – die untere gewinnt.

Eine Grenze hat das Instrument: Es vergleicht Regeln, die dasselbe Element treffen und dieselbe Eigenschaft setzen. Ob ein Selektor auf ein konkretes Dokument überhaupt passt, entscheidet es nicht – das zeigt der Selektor-Teil der Referenz. Ebenso wenig kommt hier die Vererbung vor: Ein geerbter Wert nimmt an der Kaskade gar nicht teil, er greift erst, wenn keine einzige Regel die Eigenschaft am Element selbst setzt.

Die Regeln dahinter stehen im Artikel Die Kaskade; das Tupel erklärt Spezifität berechnen.

Woher eine Regel kommt

Die erste Stufe der Kaskade ist die Herkunft, und sie kennt drei Quellen. Das Vorgabe-Stylesheet des Browsers legt fest, dass eine Überschrift fett und groß ist und ein Verweis blau und unterstrichen; es ist die schwächste Quelle. Darüber liegt das Stylesheet des Nutzers, das die wenigsten Leser überhaupt anlegen, das aber im Betriebssystem oder in einer Erweiterung durchaus vorkommt. Darüber liegt das Stylesheet des Autors – das, was auf dieser Seite gemeint ist, wenn von einem Stylesheet die Rede ist.

Der Vermerk für Vorrang dreht die Reihenfolge der ersten beiden um, und zwar bewusst: Eine als vorrangig gekennzeichnete Angabe des Nutzers schlägt jede Angabe des Autors, auch eine ebenfalls vorrangige. Das ist die einzige Stelle in CSS, an der die Sprache ausdrücklich Partei für den Leser ergreift, und der Grund dafür ist die Zugänglichkeit: Wer größere Schrift oder mehr Kontrast braucht, muss sich gegen den Entwurf durchsetzen können. Ein Autor, der überall den Vorrang setzt, hebelt nicht nur seine eigene Kaskade aus, sondern auch diese Vorkehrung.

Wenn die Kaskade nicht entscheidet

Nicht jeder Konflikt zwischen zwei Regeln ist ein Fall für die Kaskade. Sie entscheidet nur zwischen Deklarationen, die auf dasselbe Element und dieselbe Eigenschaft zielen. Zwei Regeln, von denen eine margin und die andere margin-top setzt, stehen nicht im Wettstreit: Der Browser löst zuerst die Kurzform in ihre Bestandteile auf und lässt die Kaskade dann für jeden Bestandteil einzeln laufen. Deshalb gewinnt bei gleicher Spezifität die später notierte Deklaration – und deshalb ist die Reihenfolge von Kurzform und Längsform im Stylesheet so oft die eigentliche Ursache eines vermeintlichen Kaskadenrätsels.

Ebenfalls nicht über die Kaskade läuft die Vererbung. Ein geerbter Wert ist gar keine Deklaration und tritt deshalb nie gegen eine an: Sobald irgendeine Regel die Eigenschaft am Element selbst setzt, ist die Vererbung außen vor, ganz gleich wie schwach die Regel ist. Ein einziger Typselektor am Element schlägt damit eine Angabe mit drei Kennungen am Elternelement. Wer diesen Unterschied einmal verstanden hat, sucht in solchen Fällen nicht mehr nach der stärkeren Regel, sondern nach der Regel, die überhaupt am Element ansetzt.

Kaskadenschichten: die Stufe zwischen Herkunft und Spezifität

Nach CSS 2.1 ist der Kaskade eine weitere Stufe hinzugefügt worden, und sie sitzt zwischen Herkunft und Spezifität. Mit einer eigenen At-Regel lassen sich Schichten benennen und in eine Reihenfolge bringen; eine später erklärte Schicht schlägt jede frühere, unabhängig davon, wie spezifisch deren Selektoren sind. Erst innerhalb einer Schicht entscheiden dann Spezifität und Reihenfolge wie gewohnt.

Der Nutzen zeigt sich dort, wo fremder Code eingebunden wird: Ein Baukasten kommt in eine frühe Schicht, die eigenen Regeln in eine späte, und der Wettlauf um immer stärkere Selektoren entfällt. Ungeschichtete Regeln stehen dabei über allen Schichten – wer also Schichten einführt, sollte auch die eigenen Regeln in eine legen, sonst gewinnen sie unbeabsichtigt immer.