Einführung in das CSS-Cascading

Der Algorithmus der CSS-Cascading hat die Aufgabe, CSS-Deklarationen auszuwählen, um die korrekten Werte für CSS-Eigenschaften zu bestimmen. CSS-Deklarationen kommen aus verschiedenen Ursprungstypen: User-Agent-Stylesheets, Autor-Stylesheets und Benutzer-Stylesheets.

Obwohl Stylesheets aus diesen verschiedenen Ursprüngen kommen und in verschiedenen Schichten innerhalb dieser Ursprünge sein können, überschneiden sie sich in Bezug auf ihren Standardscope; um dies zu ermöglichen, definiert der Cascade-Algorithmus, wie sie interagieren. Bevor wir die Interaktionen ansprechen, definieren wir in den nächsten Abschnitten einige Schlüsselbegriffe.

Benutzeragenten, oder Browser, verfügen über grundlegende Stylesheets, die Standardstile für jedes Dokument festlegen. Diese Stylesheets werden User-Agent-Stylesheets genannt. Die meisten Browser verwenden dafür tatsächliche Stylesheets, während andere sie im Code simulieren. Das Endergebnis ist das gleiche.

Einige Browser erlauben es Benutzern, das User-Agent-Stylesheet zu ändern, aber das ist selten und lässt sich nicht kontrollieren.

Obwohl einige Einschränkungen für User-Agent-Stylesheets durch die HTML-Spezifikation festgelegt werden, haben Browser viel Spielraum: Das bedeutet, dass es einige Unterschiede zwischen Browsern gibt. Um den Entwicklungsprozess zu vereinfachen, können Webentwickler ein CSS-Reset-Stylesheet, wie normalize.css, verwenden, das bekannte Eigenschaftswerte für alle Browser auf einen bekannten Zustand setzt, bevor Veränderungen vorgenommen werden, um ihren spezifischen Bedürfnissen zu entsprechen.

Sofern das User-Agent-Stylesheet kein !important neben einer Eigenschaft enthält, das es "wichtig" macht, haben vom Autor deklarierte Styles, einschließlich eines Reset-Stylesheets, Vorrang vor den User-Agent-Styles, unabhängig von der Spezifität des zugehörigen Selektors.

Autor-Stylesheets sind der häufigste Typ von Stylesheets; dies sind die Stile, die von Webentwicklern geschrieben werden. Diese Stile können User-Agent-Stile zurücksetzen, wie oben erwähnt, und die Stile für das Design einer bestimmten Webseite oder Anwendung definieren. Der Autor oder Webentwickler definiert die Stile für das Dokument mit einem oder mehreren verknüpften oder importierten Stylesheets, <style>-Blöcken und Inline-Stilen, die mit dem style-Attribut definiert sind. Diese Autorstile definieren das Aussehen und Gefühl der Website — ihr Thema.

In den meisten Browsern kann der Benutzer (oder Leser) der Website die Stile mit einem benutzerdefinierten Benutzer-Stylesheet, das darauf ausgelegt ist, das Erlebnis an die Wünsche des Benutzers anzupassen, überschreiben. Je nach Benutzeragenten können Benutzerstile konfiguriert werden oder über Browsererweiterungen hinzugefügt werden.

Die Reihenfolge der Cacade basiert auf dem Ursprungstyp. Die Cascade innerhalb jedes Typs basiert auf der Deklarationsreihenfolge der Cascadingschichten innerhalb dieses Typs. Für alle Ursprünge – Benutzeragent, Autor oder Benutzer – können Stile innerhalb oder außerhalb von benannten oder anonymen Schichten deklariert werden. Wenn sie mit layer, layer() oder @layer deklariert werden, werden Stile in die angegebene benannte Schicht gestellt oder in eine anonyme Schicht, wenn kein Name angegeben wird. Stile, die außerhalb einer Schicht deklariert werden, werden als Teil einer anonymen zuletzt deklarierten Schicht behandelt.

Werfen Sie einen Blick auf den Ursprungstyp der Cascade, bevor Sie sich in die Cascade-Schichten innerhalb jedes Ursprungstyps vertiefen.

Der Cascading-Algorithmus bestimmt, wie der Wert zu finden ist, der für jede Eigenschaft für jedes Dokumentelement angewendet wird. Die folgenden Schritte gelten für den Cascading-Algorithmus:

1. Relevanz: Zuerst filtert er alle Regeln aus den verschiedenen Quellen, um nur die Regeln zu behalten, die auf ein bestimmtes Element anwendbar sind. Das bedeutet Regeln, deren Selektor das gegebene Element trifft und die Teil einer geeigneten media-at-rule sind.

2. Ursprung und Wichtigkeit: Dann sortiert er diese Regeln nach ihrer Wichtigkeit, also ob sie von !important gefolgt werden oder nicht, und nach ihrem Ursprung. Schichten werden zunächst ignoriert; die Cascade-Reihenfolge ist wie folgt:

   Vorrangsreihenfolge (niedrig zu hoch)	Ursprung	Wichtigkeit
   1	Benutzeragent (Browser)	normal
   2	Benutzer	normal
   3	Autor (Entwickler)	normal
   4	CSS @keyframe-Animationen
   5	Autor (Entwickler)	!important
   6	Benutzer	!important
   7	Benutzeragent (Browser)	!important
   8	CSS-Übergänge

3. Spezifität: Bei Gleichheit mit einem Ursprung wird die Spezifität einer Regel herangezogen, um einen Wert über einen anderen zu wählen. Die Spezifität der Selektoren wird verglichen, und die Deklaration mit der höchsten Spezifität gewinnt.

4. Scope-Nähe: Wenn zwei Selektoren in der Ursprungs-Schicht mit Vorrang die gleiche Spezifität haben, gewinnt der Eigenschaftswert innerhalb von Scoped-Regeln mit der kleinsten Anzahl von Sprüngen in der DOM-Hierarchie zur Scope-Wurzel. Siehe Wie @scope-Konflikte gelöst werden für weitere Details und ein Beispiel.

5. Reihenfolge des Erscheinens: Im Ursprung mit Vorrang, wenn es konkurrierende Werte für eine Eigenschaft gibt, die in Styleblöcken zu Selektoren mit gleicher Spezifität und Scope-Nähe passen, wird die letzte Deklaration in der Stil-Reihenfolge angewendet.

Die Cascade ist in aufsteigender Reihenfolge, was bedeutet:

• Animationen haben Vorrang vor normalen Werten, egal ob sie in Benutzer-, Autoren- oder Benutzeragent-Stilen deklariert sind.
• Wichtige Werte haben Vorrang vor Animationen, egal ob sie in Benutzer-, Autoren- oder Benutzeragent-Stilen deklariert sind.
• Übergänge haben Vorrang vor wichtigen Werten.

Der Cascade-Algorithmus wird vor dem Spezifitätsalgorithmus angewendet, was bedeutet, wenn :root p { color: red;} im Benutzer-Stylesheet (Zeile 2) deklariert wird und ein weniger spezifisches p {color: blue;} im Autoren-Stylesheet (Zeile 3) vorliegt, dann werden die Absätze blau sein.

Bevor wir uns genauer ansehen, wie Cascade-Schichten die cascade beeinflussen, schauen wir uns ein Beispiel mit mehreren Quellen von CSS über die verschiedenen Ursprünge an und gehen die Schritte des Cascade-Algorithmus durch:

Hier haben wir ein User-Agent-Stylesheet, zwei Autor-Stylesheets und ein Benutzer-Stylesheet, ohne Inline-Stile innerhalb des HTML:

User-Agent CSS:

li {
  margin-left: 10px;
}

Autor CSS 1:

li {
  margin-left: 0;
} /* This is a reset */

Autor CSS 2:

@media screen {
  li {
    margin-left: 3px;
  }
}

@media print {
  li {
    margin-left: 1px;
  }
}

@layer namedLayer {
  li {
    margin-left: 5px;
  }
}

Benutzer CSS:

.specific {
  margin-left: 1em;
}

HTML:

<ul>
  <li class="specific">1<sup>st</sup></li>
  <li>2<sup>nd</sup></li>
</ul>

In diesem Fall sollten Deklarationen innerhalb der li und .specific-Regeln angewendet werden.

Erneut gibt es fünf Schritte im Cascade-Algorithmus, in dieser Reihenfolge:

1. Relevanz
2. Ursprung und Wichtigkeit
3. Spezifität
4. Scope-Nähe
5. Reihenfolge des Erscheinens

Das 1px ist für Printmedien. Aufgrund mangelnder Relevanz basierend auf seinem Medientyp wird es aus der Betrachtung entfernt.

Keine Deklaration ist mit !important markiert, daher ist die Vorrangsreihenfolge Autor-Stylesheets über Benutzer-Stylesheets über User-Agent-Stylesheet. Basierend auf Ursprung und Wichtigkeit werden das 1em aus dem Benutzer-Stylesheet und das 10px aus dem User-Agent-Stylesheet aus der Betrachtung entfernt.

Beachten Sie, dass selbst wenn der Benutzerstil auf .specific von 1em eine höhere Spezifität hat, es sich um eine normale Deklaration in einem Benutzer-Stylesheet handelt. Daher hat es eine geringere Vorrangstellung als alle Autorenstile und wird durch den Schritt Ursprung und Wichtigkeit des Algorithmus entfernt, bevor die Spezifität ins Spiel kommt.

Es gibt drei Deklarationen in Autoren-Stylesheets:

li {
  margin-left: 0;
} /* from author css 1 */

@media screen {
  li {
    margin-left: 3px;
  }
}

@layer namedLayer {
  li {
    margin-left: 5px;
  }
}

Die letzte, das 5px, ist Teil einer Cascade-Schicht. Normale Deklarationen in Schichten haben eine geringere Vorrangstellung als normale Stile, die nicht in einer Schicht innerhalb desselben Ursprungstyps sind. Dies wird ebenfalls durch Schritt 2 des Algorithmus, Ursprung und Wichtigkeit, entfernt.

Es verbleiben die 0 und die 3px, die beide den gleichen Selektor und damit die gleiche Spezifität haben. Keiner von ihnen befindet sich in einem @scope-Block, sodass die Scope-Nähe in diesem Beispiel nicht ins Spiel kommt.

Wir betrachten dann die Reihenfolge des Erscheinens. Die zweite, die letzte der zwei ungeschichteten Autorenstile, gewinnt.

margin-left: 3px;

Die Tabelle in Cascading-Reihenfolge bietet einen Überblick über die Vorrangsreihenfolge. Die Tabelle fasste die Benutzeragent-, Benutzer- und Autor-Stile nach Ursprungstyp in zwei Zeilen mit „Ursprungstyp - normal“ und „Ursprungstyp - !important“ zusammen. Die Vorrangstellung innerhalb jedes Ursprungstyps ist nuancierter. Stile können innerhalb von Schichten innerhalb ihres Ursprungstyps enthalten sein, und bei Autorenstilen gibt es auch die Frage, wo Inline-Stile in der Cascade-Reihenfolge landen.

Die Reihenfolge, in der Schichten deklariert werden, ist wichtig für die Bestimmung der Vorrangstellung. Normale Stile in einer Schicht haben Vorrang vor in früheren Schichten deklarierten Stilen; wobei normale Stile, die außerhalb einer Schicht deklariert werden, Vorrang vor normalen geschichteten Stilen unabhängig von der Spezifität haben.

In diesem Beispiel verwendete der Autor die @import-Regel von CSS, um fünf externe Stylesheets innerhalb eines <style>-Informationselements zu importieren.

<style>
  @import unlayeredStyles.css;
  @import AStyles.css layer(A);
  @import moreUnlayeredStyles.css;
  @import BStyles.css layer(B);
  @import CStyles.css layer(C);
  p {
    color: red;
    padding: 1em !important;
  }
</style>

und dann im Hauptteil des Dokuments haben wir Inline-Stile:

<p style="line-height: 1.6em; text-decoration: overline !important;">Hello</p>

In dem obigen CSS-Codeblock wurden drei Cascade-Schichten namens "A", "B" und "C" erstellt, in dieser Reihenfolge. Drei Stylesheets wurden direkt in Schichten importiert und zwei wurden ohne Erstellung oder Zuweisung zu einer Schicht importiert. Die "Alle ungeschichteten Stile" in der Liste unten (normale Autorstilvorwahl - Ordnung 4) umfasst Stile aus diesen beiden Stylesheets und den zusätzlichen ungeschichteten CSS-Stilblöcken. Zusätzlich gibt es zwei Inline-Stile, eine normale line-height-Deklaration und eine wichtige text-decoration-Deklaration:

In allen Herkunftstypen haben normale in Schichten enthaltene Stile die niedrigste Priorität. In unserem Beispiel haben die normalen Stile, die mit der zuerst deklarierten Schicht (A) verbunden sind, eine niedrigere Priorität als die normalen Stile in der zweitdeklarierten Schicht (B), die wiederum eine niedrigere Priorität als die normalen Stile in der drittdeklarierten Schicht (C) haben. Diese geschichteten Stile haben eine niedrigere Priorität als alle normalen ungeschichteten Stile, die die normalen Stile aus unlayeredStyles.css, moreUnlayeredStyles.css und die color des p im <style> selbst umfassen.

Wenn irgendwelche geschichteten Stile in A, B oder C Selektoren mit höherer Spezifität haben, die zu einem Element passen, ähnlich wie :root body p { color: black; }, spielt das keine Rolle. Diese Deklarationen werden aufgrund von Ursprung aus der Betrachtung entfernt; normale geschichtete Stile haben weniger Vorrang als normale ungeschichtete Stile. Wenn jedoch der spezifische Selektor :root body p { color: black; } in unlayeredStyles.css gefunden wurde, da Herkunft und Wichtigkeit die gleiche Priorität haben, würde Spezifität bedeuten, dass die spezifischere, schwarze Deklaration gewinnen würde.

Die Schichtreihenfolge der Priorität ist für Stile, die als !important deklariert sind, umgekehrt. Wichtige Deklarationen, die in einer Schicht gefunden werden, haben Vorrang vor wichtigen Deklarationen, die außerhalb einer Schicht gefunden werden. Wichtige Deklarationen, die in der ersten Schicht (A) gefunden werden, haben Vorrang vor wichtigen Deklarationen, die in der Schicht B gefunden werden, die Vorrang vor wichtigen Deklarationen haben, die in der Schicht C gefunden werden, die wiederum Vorrang vor wichtigen Deklarationen haben, die außerhalb einer Schicht gefunden werden.

Nur relevant für Autorenstile sind Inline-Stile, die mit dem style-Attribut deklariert werden. Normale Inline-Stile haben Vorrang vor allen anderen normalen Autorenstilen, egal wie spezifisch der Selektor ist. Wenn line-height: 2; in einem :root body p Selector-Block in einem der fünf importierten Stylesheets deklariert wurde, wäre die Zeilenhöhe immer noch 1.6. Normale Inline-Stile haben keinen Vorrang vor animierten oder Übergangseigenschaften.

Wichtige Inline-Stile haben Vorrang vor allen anderen Autorenstilen, unabhängig davon, ob sie wichtig, inline oder geschichtet sind. Wichtige Inline-Stile haben auch Vorrang vor animierten Eigenschaften, jedoch nicht vor Übergangseigenschaften. Drei Dinge können einen wichtigen Inline-Stil überschreiben:

• Ein wichtiger Benutzerstil.
• Ein wichtiger Benutzeragentenstil.
• Eine Übergangseigenschaft.

Die Prioritätsreihenfolge des Herkunftstyps ist für wichtige Stile umgekehrt. Wichtigste Stile, die außerhalb einer Cascade-Schicht deklariert sind, haben eine niedrigere Priorität als diejenigen, die als Teil einer Schicht deklariert sind. Wichtigste Stile, die in frühen Schichten kommen, haben Vorrang vor wichtigen Stilen, die in späteren Cascade-Schichten deklariert sind.

Nehmen Sie zum Beispiel das folgende CSS:

p {
  color: red;
}

@layer B {
  :root p {
    color: blue;
  }
}

Auch wenn das Rot zuerst deklariert und der Selektor weniger spezifisch ist, da ungeschichtetes CSS Vorrang vor geschichtetem CSS hat, wird der Absatz rot sein. Hätten wir einen Inline-Stil auf dem Absatz hinzugefügt, um ihn auf eine andere Farbe einzustellen, z. B. <p style="color: black">, wäre der Absatz schwarz.

Wenn wir zu diesem CSS !important hinzufügen, wird die Prioritätsreihenfolge innerhalb des Stylesheets umgekehrt:

p {
  color: red !important;
}

@layer B {
  :root p {
    color: blue !important;
  }
}

Jetzt wird der Absatz blau sein. Das !important in der frühestens deklarierten Schicht hat Vorrang vor nachfolgenden Schichten und ungeschichteten wichtigen Deklarationen. Wenn der Inline-Stil !important enthalten würde, z. B. <p style="color: black !important">, wäre der Absatz wieder schwarz. Inline-Wichtigkeit hat Vorrang vor allen anderen vom Autor deklarierten !important-Deklarationen, unabhängig von der Spezifität.

Stile, die sich im Übergang befinden, haben Vorrang vor allen wichtigen Stilen, unabhängig davon, von wem oder wie sie deklariert wurden.

Nun, da wir ein besseres Verständnis von Herkunftstyp und Cascade-Schicht-Priorität haben, erkennen wir, dass die Tabelle in Cascading-Reihenfolge genauer dargestellt werden könnte durch die folgende Tabelle:

Nur CSS-Eigenschafts-/Wertepaar-Deklarationen nehmen an der Cascade teil. CSS-At-Regel-Deskriptoren nehmen nicht an der Cascading teil und HTML-Darstellungsattribute sind nicht Teil der Cascading.

CSS At-Regeln, die Entitäten andere als Deklarationen enthalten, wie zum Beispiel eine @font-face-Regel, die Deskriptoren enthält, nehmen nicht an der Cascade teil.

Zum größten Teil nehmen die in At-Regeln definierten Eigenschaften und Deskriptoren nicht an der Cascade teil. Nur At-Regeln als Ganzes nehmen an der Cascade teil. Zum Beispiel innerhalb einer @font-face-Regel werden Schriftartnamen durch font-family-Deskriptoren identifiziert. Wenn mehrere @font-face-Regeln mit dem gleichen Deskriptor definiert sind, wird nur die am besten geeignete @font-face-Regel als Ganzes in Betracht gezogen. Wenn mehr als eine identisch geeignet ist, werden die gesamten @font-face-Deklarationen mit den Schritten 1, 2 und 4 des Algorithmus verglichen (es gibt keine Spezifität bei At-Regeln).

Während die in den meisten At-Regeln enthaltenen Deklarationen - wie die in @media, @document oder @supports - an der Cascade teilnehmen, kann die At-Regel einen gesamten Selektor als nicht relevant machen, wie wir es mit dem Druckstil im einfachen Beispiel gesehen haben.

Deklarationen in @keyframes nehmen nicht an der Cascade teil. Wie bei @font-face wird nur das @keyframes als Ganzes über den Cascade-Algorithmus ausgewählt. Die Prioritätsreihenfolge der Animation wird unten beschrieben.

Bei @import nimmt das @import selbst nicht an der Cascade teil, aber alle importierten Stile tun dies. Wenn das @import eine benannte oder anonyme Schicht definiert, werden die Inhalte des importierten Stylesheets in die angegebene Schicht gelegt. Alle anderen CSS, die mit @import importiert wurden, werden als die zuletzt deklarierte Schicht behandelt. Dies wurde oben diskutiert.

Schließlich gehorcht @charset spezifischen Algorithmen und ist nicht vom Cascade-Algorithmus betroffen.

Präsentationsattribute sind Attribute im Quelldokument, die das Styling beeinflussen können. Beispielsweise legt das veraltete align-Attribut, wenn es enthalten ist, die Ausrichtung bei mehreren HTML-Elementen fest und das fill-Attribut definiert die Farbe, die zum Zeichnen von SVG-Formen und Text verwendet wird, und definiert den Endzustand für SVG-Animationen. Während sie Autorenstile sind, nehmen Präsentationsattribute nicht an der Cascade teil.

Wenn das HTML-Präsentationsattribut vom Benutzeragenten unterstützt wird, werden gültige Präsentationsattribute, die in HTML und SVG enthalten sind, wie die align oder fill Attribute, in die entsprechenden CSS-Regeln übersetzt (alle SVG-Präsentationsattribute werden als CSS-Eigenschaften unterstützt) und im Autoren-Stylesheet vor allen anderen Stilen eingefügt mit einer Spezifität gleich 0.

Präsentationsattribute können nicht als !important deklariert werden.

CSS-Animationen, die @keyframes-Regeln verwenden, definieren Animationen zwischen Zuständen. @keyframes kaskadieren nicht, was bedeutet, dass zu jeder Zeit CSS Werte nur aus einem einzigen Satz von @keyframes verwendet und niemals mehrere mischt. Wenn mehrere Sätze von @keyframes mit dem gleichen Animationsnamen definiert sind, wird der zuletzt definierte Satz im Ursprung und in der Schicht mit der größten Priorität verwendet. Andere @keyframes werden ignoriert, selbst wenn sie andere Eigenschaften animieren.

p {
  animation: infinite 5s alternate repeatedName;
}

@keyframes repeatedName {
  from {
    font-size: 1rem;
  }
  to {
    font-size: 3rem;
  }
}

@layer A {
  @keyframes repeatedName {
    from {
      background-color: yellow;
    }
    to {
      background-color: orange;
    }
  }
}

@layer B {
  @keyframes repeatedName {
    from {
      color: white;
    }
    to {
      color: black;
    }
  }
}

In diesem Beispiel gibt es drei separate Animationsdeklarationen mit dem Namen repeatedName. Wenn animation: infinite 5s alternate repeatedName auf den Absatz angewendet wird, wird nur eine Animation angewendet: die im ungeschichteten CSS definierte Keyframe-Animation hat Vorrang vor den geschichteten Keyframe-Animationsdeklarationen basierend auf Ursprung und Schicht-Prioritätsreihenfolge. In diesem Beispiel wird nur die Schriftgröße des Elements animiert.

Nachdem Ihr Inhalt das Styling abgeschlossen hat, kann er sich in einer Situation befinden, in der er diese auf einen bekannten Zustand zurücksetzen muss. Dies kann bei Animationen, Themenwechseln usw. geschehen. Die CSS-Eigenschaft all ermöglicht es Ihnen, schnell (fast) alles in CSS in einen bekannten Zustand zurückzusetzen.

all erlaubt es Ihnen, sofort alle Eigenschaften auf einen ihrer ursprünglichen (Standard-)Zustände zurückzusetzen, den Zustand, der von der vorherigen Ebene der Cascade geerbt wurde, einen bestimmten Ursprung (das Benutzeragent-Stylesheet, das Autor-Stylesheet oder das Benutzer-Stylesheet) oder sogar die Werte der Eigenschaften vollständig zu löschen.

• Lernen: Umgang mit Konflikten
• Lernen: Cascade-Ebenen
• CSS-Cascade- und Vererbungsmodul
• CSS-Syntax
• Spezifität
• Vererbung
• At-Regeln
• Initiale, berechnete, verwendete und tatsächliche Werte