Workshop Internet-Präsenz

  1. Reihenfolge bei der Bearbeitung der Kaskade
  2. Spezifische Wirksamkeit von Selektoren
  3. Vererbung
  4. Referenzen

Kaskade und Vererbung

Ein bedeutender Problemkreis stellt die Frage dar, was passiert, wenn Eigenschaften nicht oder mehrfach in den Stilvorlagen definiert werden. Das Problem wird mit zwei Mechanismen vollständig gelöst: mit Vererbung bei fehlenden Angaben und mit der Kaskade im Falle von Mehrfachangaben.

Reihenfolge bei der Bearbeitung der Kaskade

Die Bearbeitung der Kaskade erfolgt in vier Schritten:

  1. Vorab werden alle diejenigen Style-Sheet-Deklarationen ermittelt, die für den gewünschten Medientyp zutreffend sind.
  2. Im ersten Schritt erfolgt eine Sortierung der Deklarationen nach Wichtung (normal oder wichtig (!important)) und nach Ursprung (Autor, Nutzer und Anwenderprogramm (zumeist ist dies ein Browser)). In absteigender Reihenfolge sind dies:
    1. Die !important-Deklarationen des Nutzers,
    2. die !important-Deklarationen des Autors,
    3. die normal-gewichteten Deklarationen des Autors,
    4. die normal-gewichteten Deklarationen des Nutzers,
    5. die Deklarationen des Anwenderprogramms.
  3. Im zweiten Schritt werden Regeln gleicher Wichtung und gleichen Urpsrungs nach ihrer spezifische Wirksamkeit (engl. specifity) sortiert und hierbei die Deklarationen höchster spezifischer Wirksamkeit ausgewählt (siehe unten).
  4. Im dritten Schritt werden die Regeln gleicher Wichtung, gleichen Ursprungs und gleicher spezifischer Wirksamkeit sortiert: Die letztgenannte Regel wird ausgewählt.

Dazu noch einige Anmerkungen:

  1. !important-Regeln dienen dem Interessenausgleich zwischen dem Autor und dem Nutzer. Üblicherweise sollte dabei die Stilvorlage des Autors das gleichgewichtete des Benutzers ersetzen. Im Gegensatz zur Spezifikation CSS Level 1 besitzen nun aber die !important-Deklarationen des Nutzers die höchste Priorität, damit der Nutzer seinem Bedarf entsprechend eingreifen kann (z.B. für größere Schriften oder spezielle Farben-Kombinationen).
  2. Bei zusammenfassenden Eigenschaften (engl. shorthand property) wie z.B. background gilt, dass eine vorgenommene !important-Regel auch für alle untergeordneten Eigenschaften gilt.
  3. Importierte Regeln (@import) besitzen dieselbe Wirkung wie die Stilvorlage, in die sie importiert wurden.

Spezifische Wirksamkeit von Selektoren

Um die spezifische Wirksamkeit von Selektoren zu bestimmen, wird die Anzahl von vier Selektorbestandteile ermittelt:

  1. Wert a = 1, wenn das style-Attribut in einem Tag verwendet wird.
  2. b ist die Summe der in der Regel verwendeten id-Selektoren.
  3. c ist die Summe der in der Regel verwendeten Klassen- und Pseudoklassen-Selektoren.
  4. d ist die Summe der restlichen Element- und Pseudo-Element-Selektoren außer dem *-Operator.

Diejenige Regel besitzt die höchste spezifische Wirksamkeit, die den höchsten Wert a besitzt, bei Gleichheit zählt in absteigender Reihung der jeweils höchste Wert b, c oder d.

Beispiele

Regel Spezifische Wirksamkeit
  a b c d
style = "" 1 0 0 0
#container ul li 0 1 0 2
#container ol 0 1 0 1
li.red.level 0 0 2 1
.red.level 0 0 2 0
a:link 0 0 1 1
ul[id="nav"] 0 0 1 1
h1 + p 0 0 0 2
li:first-line 0 0 0 2
* 0 0 0 0

Vererbung

Besitzt ein Element bestimmte Stilregel nicht, so erbt es sie von seinem übergeordneten Element bzw. dessen übergeordnetem Element(en). Die Vererbung wird standardmäßig ausgeführt; nur in Ausnahmefällen muss man sie mit dem Wert inherit erzwingen.

Im folgenden Beipsiel:

<h1>Dies ist eine <em>wichtige</em> Überschrift</h1>

übernimmt das em-Tag die Schriftgröße der Überschrift h1, weil im Fall des em-Tags nur dessen Schriftstil geändert wird.

Referenzen

Seitenanfang