Kaskade
Da Style-Anweisungen auf vielfältige Art und Weise eingebunden und kombiniert werden können, muss geregelt sein, was bei eventuellen Konflikten oder widersprüchlichen Angaben passiert. Wenn mehrere Anweisungen die gleiche Eigenschaft mit unterschiedlichen Werten belegen, welche Anweisung hat dann die höhere Priorität?
Als Kaskade wird das hierarchische System bezeichnet, das den Style-Anweisungen je nach Herkunft eine unterschiedliche Gewichtung verleiht. Sie ist ein Regelsystem zur Vermeidung von Konflikten zwischen verschiedenen Stylesheets.
- Jeder Browser verfügt über ein eigenes Standard-Stylesheet (Browser-Stylesheet), das er zur Darstellung einer HTML-Seite nutzt. Schrifttyp, Hintergrund- und Schriftfarbe, die Farbe der Links, die Größe der Überschriften usw. werden also bereits vom Browser formatiert.
- Moderne Browser erlauben dem Anwender, sein eigenes Stylesheet (Benutzer-Stylesheet, Userstyles) anzulegen. Der Anwender kann also seine Vorlieben im Browser einstellen und überschreibt somit die Angaben des Browser-Stylesheets.
- Das von Ihnen (als Seitenautor) angelegte Stylesheet (Autoren-Stylesheet) überschreibt in der Regel diverse Standardanweisungen sowohl des Browsers als auch des Anwenders (soweit vorhanden); die Stylesheets werden kombiniert. Wenn Sie mehrere Autoren-Stylesheets in Ihre Seite einbinden, haben im Konfliktfall die Anweisungen im zuletzt referenzierten Stylesheet das höchste Gewicht. Ihr Stylesheet, also das Autoren-Stylesheet, kann vom Benutzer nicht überschrieben werden, denn das Autoren-Stylesheet besitzt eine höhere Priorität. Diese Reihenfolge kann nur mit der
!important-Regel(siehe weiter unten) verändert werden. - Weiterhin kann es im
<head>-Bereich des Dokuments definierte (embedded) Style-Anweisungen geben. Eingebettete Anweisungen überschreiben externe oder importierte Anweisungen, aber nur im aktuellen Dokument (also dem Dokument, in das die Anweisungen eingebettet sind). - Und, last but not least, könnten auch noch Style-Anweisungen direkt im HTML-Tag (inline) vorkommen. Diese Anweisungen haben Vorrang vor allen anderen Anweisungen, jedoch nur für die aktuelle Instanz (also den HTML-Tag, in dem diese Anweisung notiert wurde).
Die !important-Regel
Mit dem Schlüsselwort !important wird die Priorität einer Angabe erhöht, so dass sie von nachfolgenden Angaben nicht überschrieben werden kann. Sie hat Vorrang vor allen anderen Spezifizitäten.
Hier ein Beispiel zur Schreibweise:
p {
color: #000066 !important;
}Alle Absätze (<p>) haben die Vordergrundfarbe grün (#000066). Nachfolgende Anweisungen zur Vordergrundfarbe bleiben wirkungslos.
Die !important-Regel muss immer am Ende der Deklaration stehen, also direkt vor dem abschließenden Semikolon (;) bzw. einer nachfolgenden weiteren (kombinierten) Deklaration.
Als !important deklarierte Anweisungen im Benutzer-Stylesheet haben Vorrang vor Anweisungen im Autoren-Stylesheet, selbst wenn diese ebenfalls mit !important ausgewiesen wurden!
Rangfolge (specificity)
Die Übersetzung des englischen Begriffs specificity ist Spezifizität und leitet sich von spezifizieren ab.
Spezifizität gehört zu den Kriterien, nach denen der Browser (oder sonstige User Agents) im Konfliktfall die vorgefundenen CSS-Anweisungen sortiert. Betrachten Sie das folgende stark vereinfachte Beispiel:
h3 {color: black;}
h3 {color: red;}Eine <h3> wird rot dargestellt, da diese Anweisung als letzte erfolgt.
div h3 {color: black;}
h3 {color: red;}Hier wird die <h3> innerhalb eines <div> schwarz dargestellt, trotz der später folgenden Anweisung, <h3> rot darzustellen. Oder anders ausgedrückt: Alle <h3> werden rot dargestellt, es sei denn, sie erscheinen innerhalb eines <div>-Elements – dann sind sie schwarz.
Jede Regeldefinition in CSS erhält eine interne Zahlenreihe von vier Ziffern zugeordnet, welche eine interne Gewichtung der Regeldefinition vornimmt, die bei der Kaskadierung berücksichtigt wird. Dabei gelten folgende Bestimmungen:
- Gruppe A (erste Ziffer): CSS-Regeln, die durch ein style-Attribut im Quelltext definiert sind. Das HTML-Attribut ersetzt in diesem Fall den Selektor. Inline-Styles erhalten immer die höchste Priorität, also 1,0,0,0.
- Gruppe B (zweite Ziffer): Die Anzahl der ID-Attribute des Selektors. Jeder ID (
#)-Attributselektor erhält eine Gewichtung von 0,1,0,0. - Gruppe C (dritte Ziffer): Die Anzahl aller anderen Attribute (einschließlich Klassen) und Pseudoklassen innerhalb des Selektors. Jeder Klassenselektor oder Pseudoklassenselektor erhält 0,0,1,0.
- Gruppe D (vierte Ziffer): Die Anzahl der Elementnamen und Pseudoelemente, die der Selektor beinhaltet. Jeder Element- oder Pseudoelementselektor erhält 0,0,0,1 an Gewicht.
Kombinatoren und Universalselektoren erhalten keine Gewichtung. Gleiches gilt für Elemente und Attribute im Quelltext, die vom W3C als „missbilligt” (deprecated) eingestuft und vom Browser zuerst in ihre CSS-Entsprechung umgewandelt werden müssen.
Die Gruppen werden vom Browser von links nach rechts interpretiert und ebenso gewichtet. Bei konkurrierenden Definitionen erhalten weiter links stehende Zahlen den Vorrang bei der Anwendung. Zur Verdeutlichung kann man diese Werte auch in einer Tabelle organisieren:
| Selektoren | A style |
B ID |
C Klasse |
D Element |
Spezifizität |
|---|---|---|---|---|---|
* {...} |
0 | 0 | 0 | 0 | 0000 |
p {...} |
0 | 0 | 0 | 1 | 0001 |
ul li {...} |
0 | 0 | 0 | 2 | 0002 |
ul li.red {...} |
0 | 0 | 1 | 2 | 0012 |
#name {...} |
0 | 1 | 0 | 0 | 0100 |
div#menu a:hover {...} |
0 | 1 | 1 | 2 | 0112 |
style="..." |
1 | 0 | 0 | 0 | 1000 |
Die Spezifizität kann man durchaus beeinflussen, um bestimmte Designziele zu erreichen. Eine künstliche Steigerung der Spezifizität könnte folgendermaßen aussehen:
p.name { ... }= 0011#content p.name { ... }= 0111html body #content p.name { ... }= 0113
Jede dieser Regeln gilt für das Element p.name, hat aber ein immer höheres Gewicht gegenüber der vorhergehenden. Vor allem bei der Arbeit mit alternativen Stylesheets kann diese Form der Steigerung sinnvoll sein.
Hinweis
Erst seit CSS2.1 gibt es vier Gruppen. In den vorherigen Spezifikationen gab es nur drei Gewichtungen, da Inline-Styles und ID-Selektoren gleich gewichtet wurden.
Zusammenfassung
Hier nochmals die komplette Kaskadenreihenfolge, wie sie von einem Browser abgearbeitet wird:
- Der Browser durchsucht das Dokument nach Stylesheet-Angaben.
- Gleichwertige Angaben werden nach ihrer Herkunft sortiert. Dabei gilt:
- Benutzer-Stylesheets mit
!importanthaben Vorrang vor Autoren-Stylesheets mit!important. - Autoren-Stylesheets mit
!importanthaben Vorrang vor Autoren-Stylesheets ohne!important. - Autoren-Stylesheets ohne
!importanthaben Vorrang vor Benutzer-Stylesheets ohne!important. - Benutzer-Stylesheets ohne
!importanthaben Vorrang vor Browser-Stylesheets. - Bei gleichwertigen Angaben innerhalb eines Stylesheets (Browser-, Autoren- oder Benutzer-Stylesheet) wird die Spezifizität berechnet und werden die Angaben danach sortiert.
- Bei Anweisungen mit gleicher Spezifizität innerhalb eines Stylesheets wird die zuletzt auftretende Anweisung verwendet.
