Funktionsweise von CSS-Kaskaden

Mathias Gamper, Senior Screendesigner

Definition

Kaskade: Im übertragenen Sinne eine Verkettung von Ereignissen oder Prozessen, wobei alle Ereignisse auf die vorhergehenden aufbauen.

Quelle: http://de.wikipedia.org/wiki/Kaskade

Quellen

Grundsätzlich können CSS-Kaskaden aus 3 unterschiedlichen Quellen kommen:

  1. Browserstylesheet > von Browserhersteller vorgegeben: So wie wir die Seite «nackt», also ohne unser CSS sehen.
  2. Userstylesheets > vom Benutzer im Browser festgelegt
  3. Autorenstylesheets > vom Entwickler im Markup der Seite hinterlegt

Reihenfolge für den Browser

Die CSS-Kaskade löst auf, welche Deklarationen und Regeln angewandt werden. Grundsätzlich geht ein User-Agent dabei wie folgt vor:

  1. Finden aller Deklarationen, für den angegebenen Medientyp gelten und die auf das Element angewandt werden müssen.
    Beispiel: Medientyp: Screen
    Deklarationen der Selektoren:     body, #wrapper, h2, #sidebar h2
  2. Sortieren der zutreffenden Deklarationen nach Priorität (normal oder !important) und Ursprung (Autor, Benutzer, Browser).
    1. Deklarationen des Userstylesheets mit einem !important
    2. Deklarationen des Autorenstylesheets mit einem !important
    3. Deklarationen des Autorenstylesheets
    4. Deklarationen des Userstylesheets
    5. Deklarationen des Browserstylesheets
  3. Sortieren nach Spezifität des Selektors.
    Spezifischere Selektoren haben ein höheres Gewicht als allgemeine, wobei Pseudoelemente und -klassen als normale Elemente beziehungsweise Klassen gezählt werden.
  4. Sortieren in Reihenfolge des Vorkommens.
    Sollten zwei Deklarationen beziehungsweise ihre jeweiligen Selektoren selbes Gewicht, Ursprung und Spezifität haben, genießt die zuletzt definierte Vorrang; importierte Stylesheets werden als am Anfang des importierenden Stylesheets stehend angesehen.

Spezifität – Gewichtung der Selektoren

Grundsätzlich gilt: Spezifische Anweisungen sind wichtiger als allgemeine.
Doch wie wird diese Spezifität gemessen? Dazu werden alle Selektoren zunächst in ihre Bestandteile zerlegt und in folgende Kategorien unterteilt:

  1. A enthält den Wert 1, wenn CSS-Deklarationen dem Element direkt per 
    style
    -Attribut zugewiesen wurden.
  2. B entspricht der Anzahl der selektierten ID-Attribute ( 
    #id
    )
  3. C entspricht der Anzahl der selektierten anderen Attribute (z.B. Klassen) und Pseudoklassen (.klasse, :pseudoklasse)
  4. D entspricht der Anzahl der selektierten Elementnamen und Pseudoelemente (:pseudoelement)

Bestimmung der Spezifität der Selektoren

Selektor A B C D Spezifität 
*
 0 0 0 0 0000 
li
 0 0 0 1 0001 
li:first-line
 0 0 0 2 0002 
ul li
 0 0 0 2 0002 
ul ol+li
 0 0 0 3 0003 
h1 + .red
 0 0 1 1 0011 
ul ol li.red
 0 0 1 3 0013 
li.red.level
 0 0 2 1 0021 
#nav
 0 1 0 0 0100 
#nav a.level
 0 1 1 1 0111 
style=""
 1 0 0 0 1000

Erläuterung
Die Tabelle zeigt die Kategorisierung der Selektoren nach ihrer Spezifität. Zunächst werden alle Selektoren nach ihrem in Spalte A angeführten Wert sortiert, danach nach dem in den Spalten B, C und zuletzt nach Spalte D. Ein Wert von «1 0 0 0» ist daher wichtiger als «0 1 2 0» oder «0 0 1 2».

Quellen und weiterführende Infos: