CSS Kaskade | Kaskadierung

Ein Bild eines Wasserfalls, einer Kaskade. Transparent darüber sieht man den Schriftzug CSS. Es dient zur Verdeutlichung der CSS Kaskade.

Die CSS Kaskade erhielt meiner Meinung nach schon einen passenden Namen. Wer sich schon einmal mit CSS befasst hat, der weiß noch lange nicht in welcher Reihenfolge welche Deklaration greift. Man hat mehrere Möglichkeiten CSS einzubinden, welche sich untereinander überschreiben können. Im Folgenden werden die einzelnen CSS Typen, sowie Einbindungsmöglichkeiten erläutert und wie man die Gewichtung der einzelnen Styles errechnen kann.

Die CSS Kaskade steckt im Namen

Die Kaskadierung von CSS steckt bereits im Namen, denn CSS bedeutet „Cascading Stylesheets“ und bedeutet soviel wie „Kaskadierende Gestaltungspapier“ oder „Kaskadierende Gestaltungsangaben“. Es wurde entwickelt, um Gestaltung von dem Inhalt einer Webseite zu trennen. Früher wurden Webseiten mit dem Quelltext an sich gestaltet, was zu unendlich großen und aufwendigen Layout-Tabellen. Dies blähte nicht nur den Code unnötig auf, sondern machte einen Quelltext quasi unlesbar. Die Kaskade muss man sich in dem Sinne so vorstellen, dass das was am nächsten ist auch am meisten Gewicht hat – das was also irgendwo als ein seichtes Wässerchen beginnt, ist am Ende der Kaskade am stärksten nach dem langen Fall.

Deswegen ergibt sich der leicht veränderte Leitsatz:

Wer zuletzt kommt, mahlt zuerst

Die verschiedenen Stylesheets

Bevor die einzelnen Gewichtungen innerhalb eines Stylesheets berechnet werden, werden die einzelnen Style-Angaben alleine schon aus Prinzip überschrieben. Demnach gibt es folgende Stylesheet-Typen:

1. Das Browserstylesheet

Jeder Browser zeigt schon aus Prinzip bestimmte Elemente anders an, damit diese bei einer Standard-Ausgabe auch zu erkennen sind, sodass auch jeder Browser seine Handschrift nachweisen kann. Dies tritt häufig bei Formularen, oder „Senden“ Buttons auf. Das Browserstylesheet ist jedoch das erste, welches überschrieben wird.

2. Das Benutzerstylesheet

Das Benutzerstylesheet sind CSS Angaben, die der Benutzer selbst bei sich im Browser einstellt. Das beste Beispiel hierfür ist größerer Text für ältere Benutzer, die kleinen Text nicht so gut lesen können und deswegen die Schrift im Browser vergrößern. Das Benutzerstylesheet ist einen Schritt weiter, als das Browserstylesheet – es ist demnach gewichtiger.

3. Das Autorenstylesheet

Das Autorenstylesheet ist das Stylesheet mit der höchsten Gewichtung und überschreibt die beiden anderen Stylesheets. Es sind die Angaben, die der Designer oder Autor der Seite angibt, wie die Seite erscheinen soll. In der Kaskade ist dies der Endpunkt in den einzelnen Stylesheets – es ist das Ende der Kaskade und hat damit am meisten Gewicht. Das Autorenstylesheet kann auf drei Wegen eingebunden werden:

  1. durch eine externe CSS, die im Head eingebunden wird
  2. durch interne CSS, die direkt im Head des Dokumentes steht
  3. durch Inline-Styles, die im jeweiligen Tag durch <p style=“…“> angegeben wird

Berechnung der Spezifität des Autorenstylesheets

Doch innerhalb eines Stylesheets können sich diverse Angaben untereinander auch überschreiben. Die Kaskade wird dabei errechnet, wie nah die Deklaration am Element selbst dran ist. So ist p {color:red;} nur ein Elementselektor, der jedes <p> im Dokument anspricht, jedoch ist p.klasse {color:green;} viel näher am einzelnen Element <p class=“klasse“> dran, welches die erste Deklaration überschreibt.

  A / Style B / ID C / class D / Element
Universalselektor * 0 0 0 0
Elementselektor (z.B p {color:red;}) 0 0 0 1
Elementselektoren (z.B p em {color:green;}) 0 0 0 2
Klassenselektor (z.B .klasse {color:blue;}) 0 0 1 0
Element-Klassenselektor (z.B p.klasse {color:yellow;}) 0 0 1 1
ID-Selektor (z.B #farbe {color:violett;}) 0 1 0 0
Inline-Style (z.B <p style=“color:grey“>) 1 0 0 0

Nach dieser Tabelle hätte demnach die Deklaration #nav a.foo {color:red;} eine Gewichtung von 111. Dagegen hätte die Deklaration a {color:green}; nur eine Gewichtung von 1 und würde definitiv überschrieben werden. Es gibt jedoch eine Ausnahme – Deklarationen mit dem !important Attribut.

Der „GOD-Modus“ für die CSS Kaskade

Wer gegen den Regen kämpfen will, der braucht Thors Hammer. Dies wäre bei CSS das !important-Attribut. Das !important-Attribut kennzeichnet CSS Deklarationen mit oberster Priorität und wird einmal geschrieben nicht mehr überschrieben. Eine solche Kennzeichnung sieht so aus: p {color: red !important;} – dies würde bedeutet, dass alle Paragraphs in HTML mit rotem Text versehen werden würden und diese Definition würde auch nicht durch Inline-Styles überschrieben werden. Zusätzlich sollte noch erwähnt werden, dass die Kennzeichnung !important nicht vererbt wird. Wenn ich in CSS normalerweise etwas definiere, wie zB p {color:red;} dann würde ein anderes Element, welches sich innerhalb dieses <p>-Tags befindet (beispielsweise <p>Im Paragraph <span>ist noch ein anderer Tag</span></p>) die gleiche Anweisung, wie das <p> erhalten. !important bezieht sich demnach wirklich nur auf das Element, welches es direkt anspricht und beeinflusst keine anderen Tags die sich dazwischen befinden.

Die CSS Kaskade zusammengefasst

Folgende Liste fasst die CSS Kaskade nochmal zusammen vom wenigsten wichtigen Stylesheet, bis hin zum wichtigsten Stylesheet und der CSS Deklaration mit der obersten Priorität:

  1. Browserstylesheet
  2. Benutzerstylesheet
  3. Autorenstylesheet
    1. externe CSS
    2. CSS im Head
    3. Inline-Styles (<p style=“…“>)
    4. !important

Ersten Kommentar schreiben

Antworten

Deine E-Mail-Adresse wird nicht veröffentlicht.


*


Time limit is exhausted. Please reload CAPTCHA.