Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Die Kaskade

Meist unterschätzt und oft schwierig zu verstehen ist das, was CSS die „Kaskade“ nennt. Die Kaskade bestimmt welche Regeln auf Elemente angewandt werden oder nicht. Vieles davon nehmen wir als selbstverständlich hin, doch bei Problemen ist hier oft die Lösung zu finden.

Wer hat Vorfahrt?

Die Kaskade kann man durchaus wie die Verkehrsregelung verstehen. Wenn zwei gleichartige Anweisungen aufeinander treffen, zum Beispiel bei widersprüchliche Angaben in importieren Stylesheets, muss das „Benutzerprogramm" (i. d. R. ein Webbrowser) entscheiden, welche der Angaben zum Zug kommt. Dafür hat das W3C in der Spezifikation zu CSS einige Festlegungen getroffen.

Neben der Frage des Ursprungs ist auch die Frage nach der Spezifikation wichtig um zu entscheiden welche Regeln letztendlich angewendet werden:

Die Ursprungsfrage

Im Straßenverkehr herrscht der Leitspruch „Rechts vor Links", es sei denn die Vorfahrt ist anders geregelt. Und ähnlich sieht es auch bei der Kaskade aus. Zwischen folgenden Ursprungsarten wird in CSS unterschieden:

Das Benutzerprogramm

Wenn man eine (X)HTML-Datei in einen Browser lädt bekommt man trotzdem einen lesbaren Text heraus: Die Überschriften (<h1>–<h6>) sind nach der Wertigkeit dargestellt, Listen (<ul>) haben Listenpunkte, Absätze (<p>) einen Abstand nach der letzten Zeile und betonte Textabschnitte (<em>) werden kursiv dargestellt. Der Browser wendet also ein Standard-Stylesheet auf das Dokument an [1].

Der Benutzer

Der Benutzer (also der, auf dessen Rechner der Browser läuft) kann ein eigenes Benutzerstylesheet einrichten, in dem er beispielsweise eine größere Schrift oder eine andere Schriftart festlegen kann.

Der Autor

Der Gestalter der Seite wiederum – und das ist die häufigste Form, der wir begegnen – kann Farben, Anordnung und Schrift seiner Webseite festlegen. Diese Autorenstylesheets werden in das (X)HTML-Dokument eingebunden und dann angewandt.

Wer hat das größte Gewicht?

Nun ist natürlich die Frage noch nicht geklärt, welche Anweisungen angewendet werden. Dafür ordnet die Kaskade jeder Stilregel eine Gewichtung zu, wenn mehrere Regeln gelten setzt sich die mit der höheren Gewichtung durch.

Es gilt: Regeln in Autorenstylesheets haben ein größeres Gewicht als Benutzerregeln und beide sind gewichtiger als das Browserstylesheet. Ein Ausnahmefall bilden sogenannte „!important-Regeln". Es gilt folgende Reihenfolge:

1. Benutzerstylesheet mit !important *
2. Autorstylesheet mit !important *
3. Autorstylesheet
4. Benutzerstylesheet
5. Browserstylesheet

(*) Diese Reihenfolge wurde in CSS Level 2 geändert, um beispielsweise vergrößerte Schrift wirken zu lassen (Siehe Beispiel 2). Vorher war die Reihenfolge noch umgekehrt – Browser, die über eine CSS-Implementation nach Level 1 verfügen, bevorzugen also Autorenstylesheets generell vor Benutzerstylesheets.

blockquote {
   display: block;
   margin: 1em 40px;
}

blockquote {
   margin: 1em;
   border: 2px solid red;
}

blockquote {
   padding: 0.5em;
   border-left: 2.4em solid silver;
}

blockquote {
   display: block;
   margin: 1em;
   padding: 0.5em;
   border: 2px solid red;
   border-left: 2.4em solid silver;
}

body {font-size: 20px !important;}

Die Spezifität

Die Spezifität regelt die Anwendung von Regeln nach dem Prinzip „Je spezifischer, desto wichtiger". Beispiel:

Weshalb kommt der Browser zu diesem Ergebnis? Er wendet folgende Konventionen beim Berechnen der Spezifität an:

• Zuerst werden die ID-Angaben des Selektors gezählt, diese ergeben eine Zahl a,
• dann werden alle Attribute gezählt (dazu gehören Klassen, Pseudoklassen, Attribut- und Pseudoselektoren) und b zugewiesen.
• Schließlich werden alle Elemente (und Pseudoelemente) im Selektor gezählt und einer Zahl c zugewiesen.

Die Reihenfolge a, b und c ergibt dann die Spezifität, wobei zuerst a, dann b und schließlich c verglichen werden. Wenn sich die Selektoren bereits bei a unterscheiden (z.B. 0 und 1) wird der Spezifischere (also der mit der 1) angewendet.

Das bedeutet für unser obiges Beispiel folgende Spezifitäten:

Ein Sonderfall ist die Zuweisung von Styleangaben im (X)HTML-Quelltext durch das style=""-Attribut. Diese Anweisung ist immer gewichtiger ist als die im Stylesheet angegebenen Definitionen.

div#test1 p { color: green;}
div p#test2 { color: maroon;}

<div id="test1">
   <p id="test2">Dies ist ein Satz in rotbraun.</p>
</div>

Nun ist es nicht verwunderlich, dass man manchmal Probleme mit der Kaskade hat. Oft kommt es vor, dass man einen Rahmen breiter zeichnen möchte und man den entsprechenden Wert im Stylesheet ändert. Doch nichts passiert. Die Begründung dafür kann in der Kaskade zu finden sein, entweder wird die Einstellung durch eine Angabe höherer Spezifität überschrieben oder es folgt eine Angabe mit gleicher Spezifität. Dagegen helfen nur gut kommentierte Stylesheets sowie die Anwendung von sogenannten Pfadangaben, d.h., dass statt einfachen Angaben wie p.wichtig kompliziertere Angaben im Stylesheet vorkommen: div#container div#inhalt p.wichtig.

Weitere Beispiele für Spezifitäten:

Weiterführende Links

• Offizielle CSS2.1-Spezifikation: Assigning property values, Cascading, and Inheritance
• Offizielle Übersetzung der CSS2-Spezifikation: Eigenschaftswerte zuweisen, Kaskaden und Vererbung (Veraltet)
• CSS4You Workshop CSS: Teil 6 – Kaskaden
• Michael Jendryschik: Kaskade
• SelfHTML: Kaskade – Anwendung von Stylesheets auf Dokumente
• Björn Seibert: Inheritance vs. Cascade – Vererbung und Kaskaden
• Björn Seibert: Spezifizität in CSS
• Der Webstandards-Adventskalender 2004 – Türchen 24 – Die Kaskade
• [1] siehe: Adventskalendertürchen Nummer 10: Das Basisstylesheet