Hauptmenü

Untermenü

Advanced CSS - Echte Kaskadierung

1. Ein paar grundsätzliche Dinge

Jetzt richten wir unser Augenmerk mal auf etwas, das ich bisher komplett ignoriert habe, da es meiner Meinung nach für den Einsteig ein klein wenig zu schwer ist und mit der Realität auch nicht so viel zu tun hat. Dachte ich zumindest lange Zeit, bis ich eines Besseren belehrt wurde ;-).

Die Stylesheet-Typen

Laut Spezifikation gibt es zunächst mal drei verschiedene Formen von Stylesheets. Als Erstes hätten wir die browsereigenen CSS-Anweisungen. Darin sind so grundsätzliche Dinge wie die Standardschrift oder das Aussehen von Links festgelegt. Als nächstes kommt dann das Benutzer-Stylesheet, das jeder für sich im Browser seiner Wahl vorgeben kann. Und last but not least haben wir dann die CSS-Deklarationen der Website, also das, was der jeweilige Entwickler vorgibt.

Die Priorität

Mit dem "Befehl" !important hinter einer CSS-Anweisung veranlasst man die Browser dazu, alle gleichartigen anderen Deklaration zu ignorieren. Man erhöht also die Priorität, so weit wie möglich (mehr dazu im nächsten Abschnitt). Ein kleines Beispiel soll dies erläutern.


<link rel="stylesheet" href="bla.css" type="text/css" />
<link rel="stylesheet" href="blubb.css" type="text/css" />

// bla.css
h1 displayinline !important; }
// blubb.css
h1 displayblockfont-weight:bold; }

Erläuterung

Bei der Erläuterung zur Gewichtung habe ich bei den Geltungsregeln schon darauf hingewiesen, dass bei Gleichwertigkeit immer die Anweisung gewinnt, die zuletzt kommt. In diesem Fall müsste also die Überschrift 1. Ordnung ein display: block; haben. Hat sie aber nicht! Weil durch !important in der bla.css die dortige Deklaration (display: inline) genommen wird, weil sie "wichtiger" ist.

2. Die Kaskade

Hier werden nun vier Stufen durchlaufen, um zu ermitteln, welche CSS-Anweisung bei Überschneidungen zum Einsatz kommt. Dabei geht der Browser nun alle in Frage kommenden Stylesheet-Typen durch und verfährt nach einem Regelwerk, das mit CSS 2.1 eingeführt wurde. Oder um es zu präzisieren, er sollte(!) danach verfahren.

Stufe 1

Der Browser sucht nach allen in Frage kommenden CSS-Anweisungen für ein wie auch immer geartetes Tag. Wenn es nur eine davon gibt, nimmt er sich diese und knöpft sich dann das nächste HTML-Element vor. Gibt es dagegen mehrere, so kommt der folgende Schritt.

Stufe 2

Nun untersucht der Browser die verschiedenen Stylesheet-Typen und deren Priorität. Dabei gilt folgende, absteigende Reihenfolge (der erste Punkt hat also die höchste Gewichtung):

Was jetzt folgt, kennen wir schon von Stufe 1. Findet er nur eine Deklaration, so geht es weiter zum nächsten HTML-Element. Anderenfalls kommt das nun Folgende.

Stufe 3

Hier kommt die Spezifität ins Spiel. Und nicht die Spezifizität, wie manche irrtümlich behaupten, meine Wenigkeit bis vor ein paar Jahren eingeschlossen. Da es sich um ein komplexeres Thema handelt, gehe ich erst im nächsten Abschnitt darauf ein.

Stufe 4

Zu guter Letzt gilt das Prinzip, dass ich beim Thema Gewichtung unter Punkt 3, §3 behandelt habe. Wenn es trotz aller vorherigen Stufen immer noch gleichwertige CSS-Anweisungen gibt, so gewinnt die Letzte. Laut Spezifikation hat eine Deklaration im Header immer Vorrang vor einer extern eingebunden Stylesheet-Datei.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt