Die Kaskade

Es passiert immer wieder, dass innerhalb der notierten CSS-Regeln Konflikte auftreten, d. h. dass für eine Eigenschaft eines Elements im Webdokument (=Subjekt) mehrere verschiedene Deklarationen des Stylesheets (oder aus mehreren Stylesheets) zutreffen. Das kann viele verschiedene Gründe haben, es kann Absicht sein oder nicht. Zur Lösung solcher Fälle folgt CSS 2.1 einer exakt vorgegebenen Prozedur, die immer ein eindeutiges Ergebnis hat. Diese Prozedur wird die Kaskade genannt — der Browser führt sie für jede Eigenschaft eines Elements und für alle Elemente eines Dokuments nacheinander aus.

Der Wasserfall

Genau wie das Wasser eines Wasserfalls (engl. 'cascade') laufen auch die Deklarationen eines Stylesheets über mehrere Stufen. Durch diese Stufen werden die letztendlich gültigen (und angewendeten) Deklarationen bestimmt.

Mit Ausnahme des Konstrukts important! innerhalb einzelner Deklarationen gibt dieser Ablauf den Stylesheets des Webautors höheres Gewicht als denen des Benutzers. Deshalb ist es wichtig, dass das Anwenderprogramm dem Leser die Möglichkeit gibt, den Einfluß bestimmter Stylesheets auszuschalten.

Stufe 1:

Finde alle Deklarationen, die für die aktuelle Element/Eigenschaft- Kombination im designierten Medientyp in Frage kommen. Das ist dann der Fall, wenn der der Deklaration zugeordnete Selektor und das aktuelle Element übereinstimmen.

Entscheidung:

Gibt es nur eine Deklaration für die aktuelle Element/Eigenschaft- Kombination, wende sie an und gehe weiter zum nächsten Element.
Gibt es mehr als eine Deklaration für die aktuelle Element/Eigenschaft- Kombination, gehe weiter nach Stufe 2.

Stufe 2:

Sortiere die gefundenen Deklarationen nach ihrem Ursprung (Stylesheet des Site-Autors, des Nutzers oder des Anwenderprogrammes) und nach ihrer Wichtigkeit. Die Wichtigkeit wird von der Deklaration important! bestimmt. Die folgende Reihenfolge in absteigender Wichtigkeit ist einzuhalten:

Deklarationen des Benutzer- Stylesheets, die die Deklaration important! enthalten.
Deklarationen aus der Website, die die Deklaration important! enthalten.
Deklarationen aus der Website, die nicht die Deklaration important! enthalten.
Deklarationen des Benutzer- Stylesheets, die nicht die Deklaration important! enthalten.
Deklarationen des Anwenderprogrammes (Browser- Stylesheet).

Entscheidung:

Gibt es nur Deklarationen unterschiedlicher Wichtigkeit für die aktuelle Element/Eigenschaft- Kombination, wende die Deklaration mit der höchsten Wichtigkeit an und gehe weiter zum nächsten Element.
Gibt es mehrere Deklaration mit gleicher Wichtigkeit für die aktuelle Element/Eigenschaft- Kombination, gehe weiter nach 3.

IE/Win 6 erlaubt keine Änderung des User-Stylesheets und kann deshalb hier nur die Werte 'b', 'c' und 'e' unterscheiden. Daher ist es sinnlos, das Konstrukt !important zur Unterscheidung von Autoren- und Anwender- Stylesheets zu verwenden.

Stufe 3:

Sortiere nach der Spezifizität des Selektors.

Entscheidung:

Gibt es nur Deklarationen unterschiedlicher Spezifizität für die aktuelle Element/Eigenschaft- Kombination, wende die Deklaration mit der höchsten Spezifizität an und gehe weiter zum nächsten Element.
Gibt es mehrere Deklaration mit gleicher Spezifizität für die aktuelle Element/Eigenschaft- Kombination, gehe weiter nach 4.

Stufe 4:

Zum Schluß sortiere nach der Reihenfolge des Auftretens: wenn zwei Regeln das gleiche Gewicht, denselben Ursprung und gleich hohe Spezifizität haben, erhält die zuletzt notierte Regel den Vorrang. Regeln aus dem Stylesheet im Kopf des Dokumentes liegen per Definition 'nach' den Regeln aus importierten Stylesheets und haben deshalb Vorrang.
TOP

Beispiele

Beispiel 1

Angenommen, das Anwenderprogramm findet die folgenden Elemente in einem Webdokument, dass nur zur Bildschirmausgabe bestimmt sein soll:

Der Absatz ist hier Teil des div mit dem ID kapitel-1, dieses wiederum ist Kindelement des div mit dem ID hauptteil. Es geht hier um die Formatierung des Elements p.

Dazu ist eine Deklaration im Stylesheet des Benutzers vorhanden:

P { border:... } /* 1. */

Drei Deklarationen sind im Stylesheet des Webautors vorhanden:

#hauptteil P { border:... } /* 2. */ #kapitel-1 P.blau { border:... } /* 3. */ #kapitel-1 P.gruen { border:... } /* 4. */

Damit wurden in Stufe 1 insgesamt 4 Deklarationen gefunden, die auf das Element zutreffen könnten.

In Stufe 2 findet sich eine Deklaration, die nach ihrer Wichtigkeit unter 'd.' einzuordnen ist (1.). Die 3 anderen Deklarationen sind dagegen unter 'c.' einzuordnen und gehen in die nächste Runde.

Inder dritten Stufe wird festgestellt, dass eine der drei übrig gebliebenen Deklarationen des Beispiels die Spezifizität '0-1-0-1' hat (2.). Sie scheidet damit aus, denn die anderen beiden haben eine Spezifizität von '0-1-1-1'.

In der vierten Stufe erfolgt die Entscheidung, dass die zuletzt notierte der beiden verbliebenen Deklarationen angewendet wird (4.).

Beispiel 2

Wir haben hier dieselbe Grundkonstellation wie im Beispiel 1, mit einem kleinen Unterschied: die Regeln (2.) und (3.) enthalten zusätzlich eine Deklaration zur Definition der Hintergrundeigenschaften. Hier können wir sehen, wie die vier Stufen der Kaskade für jede Element/Eigenschaft- Kombination durchlaufen werden.

Auch hier ist wieder eine Deklaration im Stylesheet des Benutzers vorhanden:

P { border:... } /* 1. */

Diese drei Deklarationen sind im Stylesheet des Webautors vorhanden:

#hauptteil P { border:...; background:... } /* 2. */ #kapitel-1 P.blau { border:...; background:... } /* 3. */ #kapitel-1 P.gruen { border:... } /* 4. */

Die im Beispiel 1 genannten 4 Stufen werden hier zweimal durchlaufen: zuerst für die Kombination des Elements p mit der Eigenschaft border, d. h. zur Festlegung des Rahmens, mit demselben Ergebnis wie oben.

Danach wird noch der Hintergrund für das Element p als Kombination von p mit background ermittelt.

In Stufe 1 werden insgesamt 2 Deklarationen gefunden, die auf das Element zutreffen könnten.

In der zweiten Stufe scheidet keine der Deklaration aus, da beide nach ihrer Wichtigkeit unter 'c.' einzuordnen sind.

In Stufe 3 fällt hier bereits die Entscheidung, denn die Regel (2.) hat die Spezifizität '0-1-0-1', die Regel (3.) dagegen hat eine Spezifizität von '0-1-1-1'. Die Sortierung nach der Reihenfolge entfällt.

Damit wird für des Element p dieses Beispiels 2 der in Regel (4.) deklarierte Rahmen und der in Regel (3.) deklarierte Hintergrund verwendet.
TOP

Notizen: