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 { display: inline !important; }
// blubb.css
h1 { display: block; font-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.
Der Internet Explorer 6
Unser Sorgenkind erlaubt grundsätzlich nicht, dass Benutzer-Stylesheets überschrieben werden. Daher ist es bei diesem so genannten Browser
völlig Lattens, ob man bei selbigen ein !important angibt oder nicht. Sie gewinnen immer!
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):
- Das Benutzer-Stylesheet mit
!important - Das Website-Stylesheet mit
!important - Das Website-Stylesheet ohne
!important - Das Benutzer-Stylesheet ohne
!important - Das browsereigene Stylesheet
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 Monaten 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. Auch wenn der IE6 da von Zeit zu Zeit mal wieder Unfug anstellt. Aber das sind wir ja mittlerweile gewöhnt.