Das Prinzip der Kaskadierung

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Wenn Sie CSS nur für einfache Probleme verwenden möchten, reicht es aus, nur die Grundprinzipien der Kaskadierung zu verstehen. Verwenden Sie zum Beispiel ausschließlich externe Stylesheets und setzen deren Einstellungen nur selten durch zusätzliche eingebettete Stilregeln außer Kraft, werden Sie erst gar nicht mit komplizierteren Abläufen der Kaskadierung konfrontiert.

Sobald Sie aber etwas komplexere Seiten entwickeln und Stylesheets in mehrere Seiten einbinden, werden Sie schnell in die Situation kommen, dass die Resultate in Ihrem Browser nicht dem entsprechen, was Ihre CSS-Regeln eigentlich bewirken sollen. Oft liegt das Problem dann darin, dass einem Seitenelement mehrere konkurrierende Eigenschaftsdefinitionen zugewiesen werden und nach den Regeln der Kaskadierung nicht die richtige Definition an der richtigen Stelle zum Einsatz kommt. Wenn Sie aber die Kaskadierung erst richtig verstanden haben, werden Sie Ihre CSS-Regeln wesentlich besser im Griff haben und sie logischer, konsequenter und effizienter einsetzen können.

Die Kaskadierung in CSS funktioniert nach den folgenden vier Grundprinzipien:

• Gewichtung
• Herkunft
• Besonderheit
• Ereignisabfolge

Wenn einem Element mehrere Stilregeln mit gleichen Eigenschaften zugewiesen werden und miteinander in Konflikt treten, trifft der Browser seine Entscheidung, welche zum Einsatz kommen soll, in einer Kaskade mit fünf Stufen. Wird bereits ein Auswahlmerkmal auf einer oberen Stufe erfüllt, werden die unteren Stufen in der Kaskade nicht mehr durchlaufen.

1. Der Browser durchsucht die für das Element gültigen Stilregeln nach dem Schlüsselwort !important. Trägt eine Stilregel diesen Ausdruck, wird sie bevorzugt behandelt. Das entspricht dem Prinzip der Gewichtung.
   !important ist ein Schlüsselwort, das Sie jeder CSS-Deklaration hinzufügen können, wie im folgenden Beispiel. Damit werden alle folgenden Deklarationen hinfällig, was normalerweise nicht der Fall ist.

  Später werden wir noch weitere Beispiele dazu sehen.

2. Alle Stilregeln, die mit dem Schlüsselwort !important deklariert sind und aus dem lokalen Stylesheet des Benutzers stammen, haben Vorrang vor allen anderen Regeln. Das entspricht dem Prinzip der Herkunft, kombiniert mit dem Prinzip der Gewichtung.
3. Unter den Stilregeln, die nicht die Markierung !important besitzen, werden diejenigen priorisiert, die aus dem Stylesheet des Autors stammen. Die normalen Stylesheets des Benutzers sind also hier nachgeordnet. Erneut greift das Prinzip der Herkunft.
4. Für jede Stilregel wird geprüft, wie genau sie auf das entsprechende Element zutrifft. Spezifischere Regeln bekommen Vorrang, allgemeinere werden nachrangig bewertet. Eine Stilregel, die zum Beispiel grundsätzlich für alle Absätze p in einem Dokument gilt, ist weniger spezifisch als eine Stilregel mit einem Selektor für die Absätze p einer bestimmten Klasse oder ID. So haben auch mit dem style-Attribut in HTML deklarierte Regeln immer Vorrang, weil sie nur für das betreffende Element gelten. Das entspricht dem Prinzip der Besonderheit.
5. Als letztes Kriterium entscheidet die Reihenfolge, in der die Regeln deklariert werden. Regeln, die in einem Dokument später deklariert werden, haben Vorrang vor früher deklarierten Regeln. Das ist das Prinzip der Abfolge der Ereignisse. (Anmerkung: Hier gilt also nicht das Prinzip »Wer zuerst kommt, mahlt zuerst«, sondern eher »Wer zuletzt lacht, lacht am besten.«)

Nachdem der Browser entschieden hat, welche Stilregel nach diesen Kriterien Vorrang hat, werden ihre deklarierten Eigenschaften auf das Element angewandt und die anderen vernachlässigt.

Möchte man als Designer die Wichtigkeit seiner Deklarationen und Elemente steuern, ist man gewohnt, genau in der umgekehrten Reihenfolge wie der Browser zu arbeiten. Man legt seine HTML-Tags und CSS-Regeln hauptsächlich nach dem Prinzip der Ereignisabfolge fest. Das ist auch soweit kein Problem. Werden die Seiten jedoch komplexer, sollte man sich zwangsläufig auch mit dem Prinzip der Spezifikation auseinander setzen. Das Prinzip der Herkunft wiederum ist nicht beeinflussbar in der Entwicklung, und das Schlüsselwort !important sollte man aufgrund seiner hohen Priorisierung möglichst vermeiden.

Um uns die einzelnen Stufen der Kaskade genauer anzuschauen, werden wir auf der untersten beginnen. Diese ist zwar quasi die unwichtigste, für unsere Arbeit als Designer aber gerade deswegen die relevanteste. Denn um Dokumente möglichst gut zu strukturieren und Fehler zu vermeiden, gilt für die CSS-Entwicklung folgendes Prinzip: Wende nur dann die Mittel oberer Stufen in der Kaskade an, wenn es nicht anders geht!