Kaskade

Die Kaskade ist eine besondere Eigenschaft von CSS.

Das HTML Dokument kann nicht nur von einem Stylesheet, sondern von mehreren Stylesheets aus verschiedenen Quellen gleichzeitig formatiert werden. Dabei kann es vorkommen, dass dieselben Elemente verschiedene Werte zugewiesen bekommen und diese sich gegenseitig widersprechen. Schon viele Leute sind daran verzweifelt, dass in CSS bestimmte Werte die eigentlichen Werte überschrieben haben, aber auch der gewollte Wert nie vom Browser umgesetzt wurde. Es ist wichtig zu verstehen, wie CSS in seinen Stufen die Deklarationen der Elemente prüft.

Kaskade, Vererbung und Standardwerte

Nachdem die Struktur von HTML geladen ist, versucht der Browser für jedes Element eine Styleanweisung zu finden.

Als Erstes sammelt der Browser für jedes Element alle CSS Deklarationen. Wenn er diese Sammlung komplett hat, dann vergleicht er, wie viele Deklarationen er für ein Element hat. Wenn er keine Deklaration findet, dann prüft er, ob ein Wert vererbt wird und nimmt diesen Wert. Wenn kein Wert vererbt wird, dann nimmt der Browser den Standardwert. Wird hingegen eine Deklaration gefunden, dann wird diese auch verwendet. Werden gleich mehrere Deklarationen gefunden, geht die Kaskade eine Stufe weiter.

Wichtigkeit

Hier prüft der Browser, ob eine Deklaration mit dem Zusatz "!important" als wichtig deklariert wurde. Wenn nicht, gilt die Reihenfolge Benutzer überschreibt Browser und der Autor überschreibt beides.

Der Browser selbst hat in seiner Definition kein "!important" vergeben, also müsste es entweder vom Benutzer oder vom Autor geschrieben werden. An dieser Stelle liegt das letzte Wort beim Benutzer. Wenn er ein Element mit "!important" deklariert, dann gilt das auch egal was der Autor sagt. Die Deklarationen vom Browser sind am unwichtigsten, sie verlieren gegen Benutzer und Autor. Wenn hier noch keine eindeutige Deklaration getroffen wurde, geht es in der Kaskade auf Stufe 3

Sortieren nach Spezifität

Der Browser geht dabei mit einem Punktesystem voran und bewertet die Konflikte.

Dieser Vorgang wird Spezifität genannt.

Spezifität

Ein normaler Typselektor bekommt einen Punkt
Eine Klasse bekommt 10 Punkte
Eine Id bekommt 100 Punkte
Ein Styleattribut bekommt 1000 Punkte

Falls jetzt noch nicht alle Elemente eine eindeutige Deklaration erhalten haben, weil es einen Gleichstand gibt, dann geht die Kaskade in die nächste Stufe.

Reihenfolge

Jetzt entscheidet die Reihenfolge, in der die Deklarationen im Quelltext stehen.

Die zuletzt richtig geschriebene Deklaration macht an dieser Stelle das Rennen.

Zusätzliche Regeln

Je dichter eine Deklaration an einem Element steht, umso wichtiger ist Sie.

Das bedeutet: Wenn eine Deklaration innerhalb der HTML-Datei stattfindet und direkt im Element als Inline-Style definiert wird, so gewinnt diese Deklaration gegen andere Deklarationen. Darauf folgt die Deklaration im <head>-Element. Hier wird noch mal unterschieden, in welcher Reihenfolge die Elemente im <head>-Element stehen. Also ob zuerst das <style>-Element steht oder das <link>-Stylesheet. Wenn zuerst das <link>-Stylesheet und danach das <style>-Element im Quelltext steht, dann gewinnt der <style> Anweisungsblock. Am weitesten Weg steht das eingebundene Sylesheet über den <link>. Bei der Einbindung wird trotzdem empfohlen, so viel Quelltext wie möglich in eine externe Datei zu schreiben und mit dem <style>-Elementen sparsam umzugehen. Durch diese Staffelung kann ein einheitliches aussehen für eine gesamte Website definiert werden, einzelne Abweichungen können innerhalb der Seite definiert werden und auch einzelne Elemente können dadurch individuell angepasst werden.

Weiter mit Layout