Inhaltsbereich

Aktuelles zu »Little Boxes«

Sie sehen einen Beitrag in der Einzelansicht (mit Kommentaren).

Zeige alle Beiträge

Die Kaskade im Schnelldurchgang

Der Zusammenhang zwischen Konzepten wie Vererbung, Standardwert und Kaskade ist auch für viele fortgeschrittene CSS-Schreiber oft noch ein Buch mit sieben Siegeln. Dieser Beitrag erklärt den Sachverhalt mit wenigen Worten und einer Grafik.

Wenn der Browser ein HTML-Element gestalten soll, sammelt er zunächst für jede CSS-Eigenschaft alle für dieses Element relevanten Deklarationen im CSS. Eine Deklaration ist eine Anweisung wie z. B. margin-bottom: 1em; und besteht immer aus einer Eigenschaft und einem Wert und endet mit einem Semikolon. 

Nach dieser Sammelaktion gibt es für jede CSS-Eigenschaft drei Möglichkeiten:

  • Keine Deklaration gefunden ➠ Vererbung oder Standardwert 
    Findet der Browser überhaupt keine Deklaration, prüft er, ob die Eigenschaft vererbbar ist. Wenn ja, schaut er in den Vorfahrenelementen nach, welcher Wert definiert wurde. Ist die Eigenschaft nicht vererbbar, nimmt er den Standardwert.
  • Eine Deklaration gefunden  Fertig 
    Findet der Browser genau eine Deklaration, gestaltet er diese Eigenschaft des Elementes damit.
  • Mehrere Deklarationen gefunden  Kaskade 
    Findet der Browser mehrere Deklarationen für eine Eigenschaft, werden diese wie folgt sortiert
     1. nach Wichtigkeit (!important und Ursprung
     2. nach Spezifität (Typ, Klasse, ID, Inline) 
     3. und zum Schluß nach Reihenfolge

Spätestens nach der Sortierung nach Reihenfolge steht ein eindeutiger Gewinner fest. 

Die folgende Grafik visualisiert diesen Prozess und zeigt den "Browser auf der Suche nach einem Wert" für eine bestimmte Eigenschaft zur Gestaltung des HTML-Elements ist.

Mehr zu diesem Thema finden Sie in Kapitel 11 "Die Kaskade".  

[Ursprünglich veröffentlicht: 2010-04-20]

11.07.2012 von Peter Müller
  • Schlagworte ("Tags"):
  • teil1

Zurück

Kommentare

Kommentar von ciaobello | 11.07.2012

Ok, das erste Siegel ist nun geknackt, jetzt weiss ich wenigstens wo nachschauen kann wenns mal wieder so richtig daneben geht.
Danke schön.

Kommentar von Heike | 11.07.2012

Vielen Dank, das hilft enorm weiter und prägt sich besser ein als jeder Text.

Um einen Kommentar zu schreiben, füllen Sie bitte alle Felder aus: