Die CSS-Kaskade
Beginnen wir mit Ebene 1, der am wenigsten gewichteten Regel.
Ebene 1: Browser-Stylesheets
- Browser definiert selbst gewisse Regeln, wie bestimmte Elemente auszusehen haben
- Diese werden als erstes angewendet, werden aber auch am einfachsten bzw. als erstes überschrieben
- Lehnen sich zum größten Teil an den Initialwerten der CSS-Empfehlung an
- Unterscheiden sich leicht von Browser zu browser
- Beispiel dafür ist der Standard-Abstand des <body> Elements zum Browserrand. Dieser muss – falls gewünscht – durch den Autor einer Webseite entfernt werden.
Ebene 2: User-Stylesheets
- Einstellungen des Benutzers im Browser, die ebenfalls das Erscheinungsbild einer Webseite beeinflussen
- Beispiel: die Definition einer bestimmten Schriftgröße.
Ebene 3: Autoren-Stylesheets
Dies sind die Stylesheets, die durch den Autoren – also durch den Entwickler – einer Webseite bei der Webseitenerstellung definiert werden.
Alle vom Autor definierten Stylesheets führen bei der Darstellung einer Webseite zu einem Gesamtstylesheet, in dem ebenfalls ein Element an mehreren Stellen, unterschiedliche Deklarationen bekommen kann, die sich überschneiden. Hier gilt: Je näher die Deklaration am Element ist, desto mächtiger ist sie.
Die Reihenfolge (in ihrer Priorität aufsteigend):
- externe CSS-Anweisungen
- interne CSS-Anweisungen
- style-Anweisungen direkt im Tag
Ebene 4: !important
Ist eine CSS-Deklaration mit dem Schlüsselwort “!important” versehen, wird sie immer den anderen Deklarationen bevorzugt. Sollten zwei Deklarationen mit “!important” versehen sein und auf ein Element zutreffen, gilt die zuletzt ausgegebene Deklaration.
Gewichtung der Selektoren durch die Spezifität
Doch auch unter den Selektoren gibt es bestimmte Prioritäten.
Um die Relevanz bzw. Priorität dieser Selektoren nun herauszufinden, wird ein Wert berechnet, der dessen Durchsetzungsfähigkeit festlegt. Dieser Wert lässt sich anhand eines Zahlenwertes ausdrücken, der mittels Tabelle errechnet wird.
- A erhält den Wert 1, wenn die CSS-Deklarationen direkt im style-Attribut eines HTML-Elements notiert sind.
- B ist die Anzahl der id-Attribute eines Selektors (“X#name”)
- C ist die Anzahl aller anderen Attribute einschließlich Klassen und Pseudoklassen innerhalb des Selektors.
- ist die Anzahl der Elementnamen und Pseudoelemente, die der Selektor beinhaltet.
Beispiele:
Selektor A B C D
a:link 0 0 1 1
.xyz 0 0 1 0
#nav a.xyz 0 1 1 1
li a 0 0 0 2
#nav li a 0 1 0 2
Um die Spezifität nun als Wert vorliegen zu haben, werden die Zahlen der Reihe nach von Kategorie A bis Kategorie D hintereinander Weg geschrieben. Deklarationen mit einem höheren Wert (also einer höheren Spezifität) überschreiben die Deklarationen, mit einer niedrigeren Spezifität.
Im oberen Beispiel beschreiben alle Selektoren das gleiche Element:
<div id="nav">
<ul>
<li><a class="xyz" href="URL">Link</a></li>
</ul>
</div>
Die Deklarationen von “#nav a.xyz” treffen aufgrund der höheren Spezifität auf das Element zu und werden angewendet.
Sortierung nach Vorkommen
Haben zwei oder mehrere Selektoren die gleiche Spezifität und sprechen das gleiche Element an, so entscheidet die Reihenfolge der Vorkommens. Da Browser den Quelltext einer Seite von oben nach unten auslesen, zählt der zuletzt notierte Selektor.
Kommentare
Hallo Jaynes,
wir Moderatoren in der Mediencommunity kennen die Aufgabenstellung genausowenig wie die teilnehmenden Azubis. Daher können wir eine solche Frage natürlich nicht beantworten. Gefühlsmäßig würde ich sagen, dass hier eine gute Zusammenfassung steht. Man sich aber zur Prüfung noch etwas detaillierter in den angesprochenen Bereichen vorbereiten sollte. Vor allem aber ist es wichtig, Zusammenhänge zu verstehen. Wozu dient die Kaskadierung, welchen Zweck hat sie in der Praxis?
Derzeit arbeiten eine Moderatorin und zwei Moderatoren in der Mediencommunity. Wir greifen ein, wenn wir Fehler entdecken. Aber natürlich passiert es, dass etwas übersehen wird. Daher gilt im eigenen Interesse: Immer selber überlegen, prüfen und mit anderen Quellen vergleichen. Selbst nachdencken ist sowieso die beste Vorbereitung auf die Prüfung. ;-)
Viele Grüße
Thomas Hagenhofer