Kaskadierung und Konflikte

Im ersten Teil des Artikels  die horizontale Reihenfolge der Style Sheets haben Sie erfahren, wie der Browser nach CSS2 die Style Sheets kombiniert.
In diesem Teil des Artikels geht es darum, wie der Browser den endgültigen Wert einer Eigenschaft ermittelt und warum welche Eigenschaft letztendlich das höchste Gewicht hat.

Das folgende Verfahren aus dem CSS-Draft beschreibt, wie ein Browser den endgültigen Wert einer Eigenschaft ermitteln soll. Es bricht ab, sobald eine Entscheidung getroffen wurde. Ist das in einem Schritt noch nicht möglich, so schreitet das Verfahren mit dem nächsten Punkt fort.

1.Finde alle Deklarationen, die auf das fragliche Element oder die fragliche Eigenschaft zutreffen. Falls es keine Deklaration gibt, verwende den vererbten Wert.

2.Sortiere die Deklarationen nach der ausdrücklichen Gewichtung: important wird höher gewichtet, als nicht markierte Deklarationen.

3.Sortiere nach Ursprung: importierte Style Sheets besitzen Priorität vor benutzerdefinierten Styles.

4.Sortiere nach Spezifität des Selektors: spezifischere Selektoren überschreiben allgemeinere. Zur Bestimmung der Spezifität zähle im Selektor die Anzahl der ID-Attribute (a), die Anzahl der CLASS-Attribute (b) und die Anzahl der Elementnamen (c). Die Verknüpfung dieser drei Zahlen gibt die Spezifität an; Beispiele:


LI            {..}  /* a=0 b=0 c=1 -> Spezifität =   1 */ 

UL LI         {..}  /* a=0 b=0 c=2 -> Spezifität =   2 */ 
UL OL LI      {..}  /* a=0 b=0 c=3 -> Spezifität =   3 */
LI.bsp        {..}  /* a=0 b=1 c=1 -> Spezifität =  11 */ 
UL OL LI.bsp  {..}  /* a=0 b=1 c=3 -> Spezifität =  13 */ 
"x34y"        {..}  /* a=1 b=0 c=0 -> Spezifität = 100 */ 

5.Sortiere nach Reihenfolge: Besitzen zwei Wertzuweisungen dasselbe Gewicht, so erhält die später definierte Zuweisung den Vorzug.

Zusammenfassung

Gerade bei sehr tief verschachtelten Style Sheets verliert man schnell den Überblick welche Eigenschaft man nun verstellen muss um den gewünschten Efekt zu erziehlen.
Man kann deshalb nur empfehlen, seine Style Sheets möglichst einfach zu halten und sehr spezifische Regeln erst im letzten Style Sheet der Kaskade zu setzen.

Comments are closed.

Kathegorien