CSS/Kaskade

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

Eine besondere Eigenschaft von CSS ist die Kaskade. Kaskade bedeutet, dass ein Dokument nicht nur von einem einzelnen Stylesheet formatiert werden kann, sondern von einer Vielzahl von Stylesheets, die aus verschiedenen Quellen stammen können. Dadurch wird CSS flexibel und benutzerfreundlich, da die einzelnen Stylesheets aufeinander aufbauen. Gleichzeitig entsteht aber das Problem, dass Eigenschaften für ein Element mehrfach und mit widersprüchlichen Werten festgelegt werden können. Dieses Problem wird umgangen, indem die Kaskade für Regeln und Eigenschaften eine Gewichtung errechnet, anhand derer die tatsächlich für ein Element geltenden Formate bestimmt werden.

Inhaltsverzeichnis

[Bearbeiten] Kriterien der Kaskade

Während der Kaskade der Stylesheets werden verschiedene Kriterien beachtet. Diese werden nachfolgend im Einzelnen erläutert.

[Bearbeiten] Herkunft des Stylesheets

Ein Stylesheet kann aus drei Quellen stammen: Vom Browser, vom Benutzer bzw. Besucher oder vom Autor.

Als Browser-Stylesheet wird ein Stylesheet bezeichnet, das der Browser auf alle Dokumente eines Typs anwendet. Beispielsweise besitzen alle Browser vorgegebene Formatierungen für HTML-Dokumente, während von XML-Dokumenten nur der Quelltext dargestellt wird. Zusätzlich zum Browser-Stylesheet werden auf Dokumente Benutzer-Stylesheets angewendet. Dabei handelt es sich z.B. um bevorzugte Schriftarten oder Farbmischungen. Benutzer-Stylesheets überschreiben Eigenschaften im Browser-Stylesheet. Alle übrigen Stylesheets fallen in die Kategorie Autoren-Stylesheet. Diese werden vom Dokument selbst eingebunden oder mit dem Dokument mitgeliefert (vgl. Stylesheets in Dokumente einbinden). Autoren-Stylesheets überschreiben Browser- und Benutzer-Stylesheets. Das Browser-Stylesheet bildet die Basis und besitzt geringe Priorität. Das Benutzer-Stylesheet besitzt mittlere Priorität und überschreibt das Browser-Stylesheet. Autoren-Stylesheets besitzen die höchste Priorität und überschreiben sowohl Browser- als auch Benutzer-Stylesheets.

Beachten Sie: Formate in Browser- und Benutzer-Stylesheets müssen nicht immer mit Absicht vom Standard abweichen. Spezifische Einstellungen des Betriebssystems können hier ebenfalls ihre Auswirkung zeigen. Gehen Sie also nicht davon aus, dass die Hintergrundfarbe immer weiß und die Schriftfarbe immer schwarz ist.

[Bearbeiten] Reihenfolge von Regeln und Deklarationen

Wird eine Eigenschaft oder ein Regelsatz mehrfach deklariert, so wird die zuletzt deklarierte Eigenschaft verwendet.

Beispiel
h1 { color: red; }
h1 {
 color: orange;
 color: green;
}
In diesem Beispiel wird die color-Eigenschaft drei mal innerhalb von zwei Regelsätzen deklariert. Der Wert orange im zweiten Regelsatz überschreibt dabei den Wert red aus dem ersten Regelsatz. orange wird jedoch schon in der nächsten Zeile mit dem Wert green überschrieben, da diese Deklaration als letztes notiert wurde.

[Bearbeiten] Wichtige Eigenschaften (!important)

Wird eine Eigenschaft mehrfach deklariert, so gilt in der Regel der zuletzt festgelegte Wert. Da dies auch unabsichtlich geschehen kann, existiert die Möglichkeit, einen bestimmten Wert als wichtig zu kennzeichnen. In diesem Fall wird der Wert einer Eigenschaft nicht durch eine nachfolgende Deklaration mit identischer Gewichtung überschrieben.

Ein Wert wird als wichtig gekennzeichnet, indem nach dem Wert selbst ein Leerzeichen, ein Ausrufezeichen (!) sowie das Schlüsselwort important notiert werden.

Beispiel
h1 { color: green !important; }
h1 { color: red; }
In diesem Beispiel wurde der Wert green als wichtig gekennzeichnet. Aus diesem Grund zeigt die nachfolgende Deklaration, in der der Wert red zugewiesen wird, keine Auswirkung. Das bedeutet, dass die Schriftfarbe grün dargestellt wird.

Wird eine shorthand-Eigenschaft als wichtig gekennzeichnet, so gilt die Kennzeichnung für alle Untereigenschaften der Kurzschreibweise.

Beispiel
border-left: 3px double black !important;
/* ... ist identisch zu: */
border-left-width: 3px !important;
border-left-style: double !important;
border-left-color: black !important;

[Bearbeiten] Spezifität der Regelsätze

In CSS werden Regelsätze nach ihrer Spezifität gewichtet. Allgemeine Regelsätze besitzen dabei eine geringere Gewichtung als spezifische Regelsätze. Die Spezifität wird durch die Betrachtung der Bestandteile eines Selektors ermittelt. Für jeden Selektor werden drei Zähler (A, B und C) mit dem Startwert Null festgelegt. Jeder Bestandteil eines Selektors wirkt sich auf diese Zähler aus:

  • Der Zähler A wird durch jedes Vorkommen eines ID-Selektors um Eins erhöht.
  • Der Zähler B wird durch jedes Vorkommen eines Attribut- oder Klassenselektors bzw. einer Pseudoklasse um Eins erhöht.
  • Der Zähler C wird durch jedes Vorkommen eines Typselektors oder eines Pseudoelements um Eins erhöht.
  • Der Universalselektor verhält sich neutral, er wird ignoriert.
  • Die Pseudoklasse :not() selbst wird ignoriert, die Selektoren innerhalb der Klasse werden jedoch wie vorbeschrieben gewertet.
Beispiel: - Spezifität von Selektoren von gering nach hoch geordnet
*              /* A=0, B=0, C=0, Spezifität 0 0 0 */
h1             /* A=0, B=0, C=1, Spezifität 0 0 1 */
ul li          /* A=0, B=0, C=2, Spezifität 0 0 2 */
a::after       /* A=0, B=0, C=2, Spezifität 0 0 2 */
p:first-child  /* A=0, B=1, C=1, Spezifität 0 1 1 */
a:not([href])  /* A=0, B=1, C=1, Spezifität 0 1 1 */
ul.nav [href]  /* A=0, B=2, C=1, Spezifität 0 2 1 */
#author        /* A=1, B=0, C=0, Spezifität 1 0 0 */
#editor p      /* A=1, B=0, C=1, Spezifität 1 0 1 */
Beachten Sie: Die Zähler der Spezifität sind voneinander unabhängig. Ein hoher Wert des Zählers C wirkt sich nicht auf den Zähler B aus (z.B. ist 0 0 15 weniger spezifisch als 0 1 5).

[Bearbeiten] Spezifität des style-Attributs

Werden Eigenschaften in einem style-Attribut festgelegt, so ist diese Eigenschaft spezifischer als jeder Regelsatz in einem Stylesheet. Die Errechnung der Spezifität erfolgt mit Hilfe eines vierten Zählers (hier A), der sich um Eins erhöht, wenn ein style-Attribut gesetzt wurde.

Beispiel: - Berechnung der Spezifität mit Berücksichtigung des style-Attributs
*              /* A=0, B=0, C=0, D=0, Spezifität 0 0 0 0 */
h1             /* A=0, B=0, C=0, D=1, Spezifität 0 0 0 1 */
ul li          /* A=0, B=0, C=0, D=2, Spezifität 0 0 0 2 */
a::after       /* A=0, B=0, C=0, D=2, Spezifität 0 0 0 2 */
p:first-child  /* A=0, B=0, C=1, D=1, Spezifität 0 0 1 1 */
a:not([href])  /* A=0, B=0, C=1, D=1, Spezifität 0 0 1 1 */
ul.nav [href]  /* A=0, B=0, C=2, D=1, Spezifität 0 0 2 1 */
#author        /* A=0, B=1, C=0, D=0, Spezifität 0 1 0 0 */
#editor p      /* A=0, B=1, C=0, D=1, Spezifität 0 1 0 1 */
style=""       /* A=1, B=0, C=0, D=0, Spezifität 1 0 0 0 */

[Bearbeiten] Ablauf der Kaskade

Der Ablauf der Kaskade besteht aus mehreren Schritten, in denen die einzelnen Kriterien angewandt werden und zur Aussortierung von Deklarationen führen.

Im ersten Schritt werden alle Deklarationen gesucht, die unter Berücksichtigung des aktuellen Ausgabemediums auf ein Element angewendet werden. Anschließend werden diese Deklarationen nach Herkunft und Wichtigkeit sortiert:

  • Deklarationen im Browser-Stylesheet
  • Deklarationen des Benutzers
  • Deklarationen des Autors
  • Wichtige Deklarationen (mit !important) des Autors
  • Wichtige Deklarationen (mit !important) des Benutzers

Diese Sortierung soll sicherstellen, dass Autoren größtmöglichen Gestaltungspielraum haben, aber für den Benutzer wichtige Formate, z.B. die Mindestschriftgröße immer mit Vorrang behandelt werden. Die nun übrigen Regelsätze werden nach ihrer Spezifität geordnet. Regelsätze mit hoher Spezifität überschreiben die mit geringerer Spezifität. Sind am Ende noch widersprüchliche Deklarationen vorhanden, wird die Reihenfolge beachtet. Später deklarierte Eigenschaften überschreiben früher deklarierte.

[Bearbeiten] Hinweise zur Präsentation außerhalb von CSS

In HTML existieren Elemente und Attribute, die die Formatierung von Dokumenten steuern können. Der Großteil davon gilt als missbilligt. Davon abgesehen gibt es vereinzelt Attribute, die nicht der Gestaltung dienen, aber dennoch eine Auswirkung auf die Darstellung besitzen, etwa cols und rows des textarea-Elements. CSS bezeichnet Formate, die über diese Attribute festgelegt werden, als Hinweise zur Präsentation. Obwohl sich diese Elemente und Attribute direkt im Dokument befinden, werden sie von CSS während der Kaskade am Anfang eines Autoren-Stylesheets eingeordnet. Sie besitzen keine Spezifität. Das bedeutet, dass vom Autor festgelegte Eigenschaften die Hinweise zur Präsentation immer überschreiben.

Beachten Sie: Das in HTML erlaubte style-Attribut zählt nicht zu den präsentationellen Hinweisen. Es besitzt seine eigene Spezifität.

Auch andere Sprachen besitzen Hinweise zur Präsentation in ihrem Sprachumfang. CSS definiert, dass diese Formate in CSS-Deklarationen übersetzt werden sollen. Diese Deklarationen werden dann als Browser-Stylesheet oder am Anfang des Autoren-Stylesheets eingeordnet. Wie in HTML wird diesen Eigenschaften keine Spezifität zugeordnet.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML