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: