Wofür steht das "C" in CSS?

Ich gebe es zu: ich bin ein Fan von CSS. Erlaubt mir doch diese “Layoutsprache” das Erscheinungsbild einer Homepage einfach und schnell komplett zu ändern, ohne am dahinterliegenden HTML-Code irgendetwas ändern zu müssen (naja, meistens). Lange habe ich mir über den komischen Namen “cascading style sheets” keine größeren Gedanken gemacht – bis vor einiger Zeit, als ich meinen Kollegen in der Firma dieses magische Werkzeug erklären sollte. Da stellte sich mir dann erstmalig die Frage, was “cascading” bedeutet…

Wie überall (zumindest was IT angeht) hilft auch hier das Internet weiter. Eine “Kaskade” ist eine vordefinierte Abarbeitung und Gewichtungsregelung, damit der Browser weiß, welche CSS Regeln bei z.B. Konflikten Vorrang vor anderen haben. Wie das genau funktioniert, will ich im heutigen Blogpost etwas genauer erklären.

(!) Achtung! Ab jetzt wird es ein wenig technisch – ich versuche es so einfach wie möglich zu erklären. Sollte ich mit meinen Erklärungen scheitern, empfehle ich die untenstehenden weiterführenden Links zum Selbststudium!

Die Regeln

Wie bereits gesagt, gibt es einige Regeln, wie der Browser erkennt, wann welche Regel zu verwenden ist und die ich nun genauer anführe. Diese Dokumentation betrifft die Regeln mit Stand CSS 2.1 welche aber auch mit CSS 3.0 weiterhin gelten. Im Prinzip kann man sich das Verhalten wie bei mehreren Wassefällen darstellen, wo am Ende die letzte Stufe maßgeblich ist :-).

Die “Einbindungsregel”

Wofür steht das "C" in CSS?

CSS “code” kann man auf 3 verschiedene Wege in ein HTML-Dokument einbinden:

  1. über eine <link rel=”stylesheet”> Element im <head> der HTML-Seite
  2. innerhalb eines <style></style> Bereiches im >head> der HTML-Seite
  3. bei jedem HTML-Tag im style=”” Attribut.

Wie man aus der Auflistung sieht, gibt es hier eine Gewichtung. Dabei gilt: im <head> bestimmt die REIHENFOLGE die Gewichtung. Good practice ist es, die <link> Elemente VOR etwaigen <style> Elementen zu plazieren. Vor all diesen Regeln haben CSS-Angaben im style Attribut der einzelnen HTML Tags Vorrang!

Die “Selektorregel”

Wofür steht das "C" in CSS?

Bei der Selektorregel kommt es drauf an, auf welcher “Ebene” der Style definiert wird. Auch hier gibt es eine Reihenfolge, die wie folgt interpretiert wird:

  1. Browserspezifische Style-Definitionen für HTML-Tags
  2. Webseitenspezifische Style-Definitionen für ein HTML-Tag (z.B. <a>)
  3. Webseitenspezifische Style-Definitionen für eine spezifizierte Klasse (class=”link”)
  4. Webseitenspezifische Style-Definitionen für ein bestimmtes ID-Element (id=”homelink”)

Wie bereits bei der Einbindungsregel hat die ID ein höheres Gewicht als die Klasse welche wiederrum höher gewichtet ist, als Regeln beim HTML-Tag. In der Praxis sieht es so aus, dass man die Basiselemente anhand der Tags vordefiniert und auf Klassen und/oder ID-Ebene spezifische Darstellungsmerkmale überschreibt.

Was passiert, wenn es auf dem gleichen Level verschiedene Definitionen gibt? Dann entscheidet generell die Regel, welche ZULETZT definiert wurde.

Die “KASKADE”

Wofür steht das "C" in CSS?

Die Kaskade selbst wird in 4 Stufen abgearbeitet. D.h. wenn mehrere Regeln für ein Attribut gelten würden, wird Stufenweise geprüft, welche Regel der Browser wirklich verwenden sollte. Der Browser schaltet auf die nächsthöhere Stufe, wenn er zuvor keine eindeutige Lösung finden konnte, und läuft wie folgt ab:

Stufe 1

Der Browser sucht alle in Frage kommenden CSS-Anweisungen für einen HTML-Tag. Gibt  es nur eine, nimmt er sich diese und bearbeitet das nächste HTML-Element.  Gibt es dagegen mehrere, so kommt

Stufe 2

Der Browser untersucht die verschiedenen Stylesheet-Typen und deren Priorität. Dabei gilt folgende, absteigende Reihenfolge

  • Das Benutzer-Stylesheet mit !important
  • Das Website-Stylesheet mit !important
  • Das Website-Stylesheet ohne !important
  • Das Benutzer-Stylesheet ohne !important
  • Das browsereigene Stylesheet

Findet er nur eine Deklaration, so geht es weiter zum nächsten HTML-Element. Ansonsten geht es weiter zu

Stufe 3

Hier kommt die Spezifität ins Spiel. Hier muss man sich eine Matrix vorstellen, welche im Browser über Counter A-D abgebildet sind, welche je bestimmten Elementtyp erhöht werden:

  • Der Zähler A wird bei Eigenschaften in einem style-Attribut erhöht. Dadurch sind diese Eigenschaft spezifischer als jeder Regelsatz in einem Stylesheet.
  • Der Zähler B wird durch jedes Vorkommen eines ID-Selektors um Eins erhöht.
  • Der Zähler C wird durch jedes Vorkommen eines Attribut- oder Klassenselektors bzw. einer Pseudoklasse um Eins erhöht.
  • Der Zähler D wird durch jedes Vorkommen eines Typselektors oder eines Pseudoelements um Eins erhöht. Die Pseudoklasse :not() selbst wird ignoriert, die Selektoren innerhalb der Klasse werden jedoch wie vorbeschrieben gewertet.
  • Der Universalselektor * verhält sich neutral, er wird ignoriert.
BeispielABCDSpezifität
*00000 0 0 0
h100010 0 0 1
ul h100020 0 0 2
a:after00020 0 0 2
p:first-child00110 0 1 1
a:not([href])00110 0 1 1
ul.nav [href]00210 0 2 1
#author01000 1 0 0
#editor p01010 1 0 1
style=””10001 0 0 1

Stufe 4

Gibt es noch immer Konflikte, wird die letzte Regel angewendet.

Was kann ich mit der Kaskade tun?

Wofür steht das "C" in CSS?

Durch die Kaskade kann man mit bestimmten CSS-Definitionen das Erscheinungsbild einer Seite noch stark anpassen. Gelegentlich frägt man sich auch, warum Regeln nicht angewendet werden, obwohl die Syntax passen sollte. Hier ist dann die Antwort sehr oft in der Kaskade zu finden.

Ich selbst verwende die Kaskade um fixe Layouts bei einem Framework trotzdem mittels “Style-Überladung” meine eigene Darstellung umsetzen zu können. Beispiele findet Ihr auch auf dieser Homepage ;-).

weiterführende Links

Hier habe ich Euch ein paar weiterführende Links zusammengestellt – das Thema CSS werde ich in weiteren Blog-Posts noch näher beleuchten 😉


0 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.