Einführung in die CSS-Kaskade

Der Algorithmus der CSS-Kaskade hat die Aufgabe, CSS-Deklarationen auszuwählen, um die korrekten Werte für CSS-Eigenschaften zu bestimmen. CSS-Deklarationen stammen aus verschiedenen Ursprungstypen: Browser-Stilblätter, Autoren-Stilblätter und Benutzer-Stilblätter.

Obwohl Stilblätter aus diesen unterschiedlichen Ursprüngen stammen und sich in verschiedenen Schichten in jedem dieser Ursprünge befinden können, überschneiden sie sich in Bezug auf ihren Standardanwendungsbereich; um dies zu ermöglichen, definiert der Kaskadenalgorithmus, wie sie interagieren. Bevor wir auf die Interaktionen eingehen, definieren wir einige Schlüsselbegriffe in den nächsten Abschnitten.

Benutzeragenten, oder Browser, besitzen grundlegende Stilblätter, die jedem Dokument Standardstile verleihen. Diese Stilblätter werden als Benutzeragenten-Stilblätter bezeichnet. Die meisten Browser verwenden dafür tatsächliche Stilblätter, während andere sie im Code simulieren. Das Endergebnis ist dasselbe.

Einige Browser ermöglichen es Benutzern, das Benutzeragenten-Stilblatt zu ändern, aber das ist selten und kann nicht gesteuert werden.

Obwohl bestimmte Einschränkungen für Benutzeragenten-Stilblätter durch die HTML-Spezifikation festgelegt sind, haben Browser viel Freiheit, was bedeutet, dass es einige Unterschiede zwischen Browsern gibt. Um den Entwicklungsprozess zu vereinfachen, können Webentwickler ein Reset-CSS-Stilblatt verwenden, wie zum Beispiel normalize.css, das gemeinsame Eigenschaftswerte auf einen bekannten Zustand für alle Browser setzt, bevor mit Änderungen zur Anpassung an spezifische Bedürfnisse begonnen wird.

Sofern das Benutzeragenten-Stilblatt nicht ein !important neben einer Eigenschaft enthält, die es "wichtig" macht, haben die von Autorenstilen deklarierten Stile, einschließlich eines Reset-Stilblatts, Vorrang vor den Benutzeragenten-Stilen, unabhängig von der Spezifität des zugehörigen Selektors.

Autoren-Stilblätter sind die häufigste Art von Stilblättern; sie sind die Stile, die von Webentwicklern geschrieben werden. Diese Stile können Benutzeragenten-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 mithilfe von einem oder mehreren verlinkten oder importierten Stilblättern, <style>-Blöcken und Inline-Stilen, die mit dem style-Attribut definiert sind. Diese Autorenstile definieren das Aussehen und Verhalten der Website — ihr Thema.

In den meisten Browsern kann der Benutzer oder Leser der Website wählen, die Stile mithilfe eines benutzerdefinierten Benutzer-Stilblatts zu überschreiben, das darauf ausgelegt ist, das Erlebnis an die Wünsche des Benutzers anzupassen. Abhängig vom Benutzeragenten können Benutzerstile konfiguriert werden oder über Browsererweiterungen hinzugefügt werden.

Die Kaskadenreihenfolge basiert auf dem Ursprungstyp. Die Kaskade innerhalb jedes Ursprungstypen basiert auf der Deklarationsreihenfolge der Kaskadenschichten 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 oder in eine anonyme Schicht platziert, wenn kein Name angegeben wurde. Stile, die außerhalb einer Schicht deklariert sind, werden als Teil einer zuletzt deklarierten anonymen Schicht behandelt.

Betrachten wir den kaskadierenden Ursprungstyp, bevor wir uns den Kaskadenschichten innerhalb jedes Ursprungstyps zuwenden.

Der Kaskadenalgorithmus bestimmt, wie der Wert für jede Eigenschaft für jedes Dokumentelement angewendet wird. Die folgenden Schritte gelten für den Kaskadenalgorithmus:

1. Relevanz: Zuerst filtert er alle Regeln aus den verschiedenen Quellen, um nur die Regeln zu behalten, die auf ein bestimmtes Element angewendet werden. Das bedeutet Regeln, deren Selektor mit dem gegebenen Element übereinstimmt und die Teil einer passenden media-Regel sind.

2. Ursprung und Wichtigkeit: Dann sortiert er diese Regeln nach ihrer Wichtigkeit, das heißt, ob sie mit !important versehen sind oder nicht, und nach ihrem Ursprung. Ignorieren wir für einen Moment die Schichten, ist die Kaskadenreihenfolge wie folgt:

   Reihenfolge (niedrig bis 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: Im Falle der Gleichheit mit einem Ursprung wird die Spezifität einer Regel berücksichtigt, um einen Wert auszuwählen. Die Spezifität der Selektoren wird verglichen, und die Deklaration mit der höchsten Spezifität gewinnt.

4. Nähe zum Anwendungsbereich: Wenn zwei Selektoren in der Ursachenschicht mit Vorrang die gleiche Spezifität haben, gewinnt der Eigenschaftswert in geschachtelten Regeln mit der geringsten Anzahl von Sprüngen in der DOM-Hierarchie bis zur Anwendungsbereichswurzel. 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 Stilblöcken enthalten sind, die Selektoren mit gleicher Spezifität und Nähe zum Anwendungsbereich entsprechen, wird die letzte Deklaration in der Stilreihenfolge angewendet.

Die Kaskade ist in aufsteigender Reihenfolge, was bedeutet:

• Animationen haben Vorrang vor normalen Werten, unabhängig davon, ob sie in Benutzer-, Autoren- oder Benutzeragentenstilen deklariert sind.
• Wichtige Werte haben Vorrang vor Animationen, unabhängig davon, ob sie in Benutzer-, Autoren- oder Benutzeragentenstilen deklariert sind.
• Übergänge haben Vorrang vor wichtigen Werten.

Der Kaskadenalgorithmus wird vor dem Spezifitätsalgorithmus angewendet. Das heißt, wenn :root p { color: red;} im Benutzerstilblatt (Reihe 2) deklariert ist und ein weniger spezifisches p {color: blue;} im Autorenstilblatt (Reihe 3) vorhanden ist, werden die Absätze blau sein.

Bevor wir einen tieferen Blick darauf werfen, wie Kaskadenschichten die Kaskade beeinflussen, schauen wir uns ein Beispiel an, bei dem mehrere Quellen von CSS aus den verschiedenen Ursprüngen eingebunden sind und arbeiten die Schritte des Kaskadenalgorithmus durch:

Hier haben wir ein Benutzeragenten-Stilblatt, zwei Autoren-Stilblätter und ein Benutzer-Stilblatt, ohne Inline-Stile innerhalb des HTML:

Benutzeragenten-CSS:

li {
  margin-left: 10px;
}

Autoren-CSS 1:

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

Autoren-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.

Noch einmal, es gibt fünf Schritte im Kaskadenalgorithmus, in dieser Reihenfolge:

1. Relevanz
2. Ursprung und Wichtigkeit
3. Spezifität
4. Nähe zum Anwendungsbereich
5. Erscheinungsreihenfolge

Das 1px ist für Medien im Druckformat. Aufgrund mangelnder Relevanz basierend auf seinem Medientyp wird es von der Berücksichtigung ausgeschlossen.

Keine Deklaration ist als !important gekennzeichnet, sodass die Reihenfolge der Priorität Autoren-Stilblätter über Benutzer-Stilblätter über Benutzeragenten-Stilblätter ist. Basierend auf Ursprung und Wichtigkeit werden das 1em aus dem Benutzerstilblatt und das 10px aus dem Benutzeragenten-Stilblatt von der Berücksichtigung ausgeschlossen.

Beachten Sie, dass auch wenn der Benutzerstil auf .specific mit 1em eine höhere Spezifität aufweist, es sich um eine normale Deklaration in einem Benutzer-Stilblatt handelt. Als solche hat sie eine geringere Priorität als alle Autorenstile und wird vom Schritt Ursprung und Wichtigkeit des Algorithmus entfernt, bevor die Spezifität ins Spiel kommt.

Es gibt drei Deklarationen in Autoren-Stilblättern:

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

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

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

Die letzte, 5px, ist Teil einer Kaskadenschicht. Normale Deklarationen in Schichten haben eine geringere Priorität als normale Stile, die nicht in einer Schicht innerhalb des gleichen Ursprungstyps sind. Auch dies wird im Schritt 2 des Algorithmus, Ursprung und Wichtigkeit, ausgeschlossen.

Dies lässt 0 und 3px, die beide den gleichen Selektor und daher die gleiche Spezifität haben. Keiner von ihnen befindet sich in einem @scope-Block, sodass die Nähe zum Anwendungsbereich in diesem Beispiel ebenfalls nicht ins Spiel kommt.

Dann schauen wir auf Reihenfolge des Erscheinens. Der zweite, der letzte der beiden nicht geschichteten Autorenstile, gewinnt.

margin-left: 3px;

Die Tabelle in Kaskadenreihenfolge lieferte eine Übersicht über die Prioritätenreihenfolge. Die Tabelle fasste die Benutzersagenten-, Benutzer- und Autorenstile in zwei Zeilen zusammen mit "Ursprungstyp - normal" und "Ursprungstyp - !important". Die Priorität innerhalb jedes Ursprungstyps ist jedoch differenzierter. Stile können in Schichten innerhalb ihres Ursprungstyps enthalten sein, und bei Autorenstilen gibt es auch das Problem, wo Inline-Stile in der Kaskadenreihenfolge landen.

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

In diesem Beispiel verwendete der Autor die @import-Regel von CSS, um fünf externe Stilblätter 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 Körper des Dokuments haben wir Inline-Stile:

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

Im obigen CSS-Codeblock wurden drei Kaskadenschichten mit den Namen "A", "B" und "C" erstellt, in dieser Reihenfolge. Drei Stilblätter wurden direkt in Schichten importiert, und zwei wurden ohne die Erstellung einer Schicht oder deren Zuweisung importiert. Die "Alle nicht geschichteten Stile" in der folgenden Liste (normale Autorenstil-Priorität - Reihenfolge 4) umfassen Stile aus diesen beiden Stilblättern und den zusätzlichen nicht geschichteten CSS-Stilblöcken. Darüber hinaus gibt es zwei Inline-Stile, eine normale line-height-Deklaration und eine wichtige text-decoration-Deklaration:

In allen Ursprungstypen haben normale Stile, die in Schichten enthalten sind, die niedrigste Priorität. In unserem Beispiel haben die normalen Stile, die mit der zuerst deklarierten Schicht (A) verbunden sind, eine geringere Priorität als die normalen Stile in der zweitdeklarierten Schicht (B), die eine geringere Priorität als die normalen Stile in der drittdeklarierten Schicht (C) haben. Diese geschichteten Stile haben eine geringere Priorität als alle normalen nicht geschichteten Stile, die normale Stile aus unlayeredStyles.css, moreUnlayeredStyles.css und die Farbe des p im <style> selbst umfasst.

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 des Ursprungs nicht berücksichtigt; normale geschichtete Stile haben eine geringere Priorität als normale nicht geschichtete Stile. Wenn jedoch der spezifischere Selektor :root body p { color: black; } in unlayeredStyles.css gefunden wurde, bedeutet dies, dass beide Ursprung und Wichtigkeit die gleiche Priorität haben und Spezifität bedeuten würde, dass die spezifischere, schwarze Deklaration gewinnen würde.

Die Schichtenreihenfolge der Priorität wird für als !important deklarierte Stile 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 Schicht B deklariert sind, die Vorrang vor wichtigen Deklarationen in Schicht C haben, die wiederum Vorrang vor wichtigen Deklarationen haben, die außerhalb einer Schicht deklariert sind.

Nur für Autorenstile relevant sind Inline-Stile, die mit dem style-Attribut deklariert werden. Normale Inline-Stile haben Vorrang vor allen anderen normalen Autorenstilen, unabhängig von der Spezifität des Selektors. Wenn line-height: 2; in einer :root body p-Selektorblock in einem der fünf importierten Stilblätter deklariert wurde, würde die Zeilenhöhe immer noch 1.6 betragen. Normale Inline-Stile haben keinen Vorrang vor animierten oder übergangenen Eigenschaften.

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

• Ein wichtiger Benutzerstil.
• Ein wichtiger Benutzeragentenstil.
• Eine übergangene Eigenschaft.

Die Reihenfolge der Prioritäten der Ursprungstypen ist für wichtige Stile umgekehrt. Wichtige Stile, die außerhalb einer Kaskadenschicht deklariert sind, haben eine geringere Priorität als diejenigen, die als Teil einer Schicht deklariert sind. Wichtige Stile, die in frühen Schichten vorkommen, haben Vorrang vor wichtigen Stilen, die in späteren Kaskadenschichten deklariert sind.

Nehmen Sie zum Beispiel das folgende CSS:

p {
  color: red;
}

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

Auch wenn das Rot zuerst deklariert wurde und einen weniger spezifischen Selektor hat, wird der Absatz rot sein, weil nicht geschichtetes CSS Vorrang vor geschichtetem CSS hat. Hätten wir einen Inline-Stil am Absatz mit einer anderen Farbe hinzugefügt, z.B. <p style="color: black">, wäre der Absatz schwarz.

Wenn wir !important zu diesem CSS hinzufügen, ändert sich die Prioritätenreihenfolge im Stylesheet:

p {
  color: red !important;
}

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

Jetzt wird der Absatz blau. Das !important in der frühesten deklarierten Schicht hat Vorrang vor nachfolgenden Schichten und nicht geschichteten wichtigen Deklarationen. Wenn der Inline-Stil !important enthalten würde, wie z.B. <p style="color: black !important">, wäre der Absatz erneut 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, wer oder wie sie deklariert sind.

Jetzt, wo wir ein besseres Verständnis der Ursprungstypen und der Priorität von Kaskadenschichten haben, stellt sich heraus, dass die Tabelle in Kaskadenreihenfolge genauer durch die folgende Tabelle dargestellt werden könnte:

Nur CSS Eigenschafts-/Wertpaardeklarationen nehmen an der Kaskade teil. CSS Regelbeschreibungen nehmen nicht an der Kaskade teil, und HTML-Präsentationsattribute sind nicht Teil der Kaskade.

CSS Regel-Deklarationen, die andere Entitäten als Deklarationen enthalten, wie eine @font-face-Regel, die Beschreibungen enthält, nehmen nicht an der Kaskade teil.

Im Allgemeinen nehmen die in Regel-Deklarationen definierten Eigenschaften und Beschreibungen nicht an der Kaskade teil. Nur Regel-Deklarationen als Ganzes nehmen an der Kaskade teil. Zum Beispiel werden innerhalb einer @font-face-Regel Schriftartnamen durch font-family-Beschreibungen identifiziert. Wenn mehrere @font-face-Regel-Deklarationen mit derselben Beschreibung definiert sind, wird nur das passendste @font-face insgesamt berücksichtigt. Wenn mehrere identisch passend sind, werden die gesamten @font-face-Deklarationen unter Verwendung der Schritte 1, 2 und 4 des Algorithmus verglichen (es gibt keine Spezifität bei Regel-Deklarationen).

Während die in den meisten Regel-Deklarationen enthaltenen Deklarationen — wie die in @media, @document oder @supports — an der Kaskade teilnehmen, kann die Regel-Deklaration als Ganzes dazu führen, dass ein ganzer Selektor irrelevant ist, wie wir im einfachen Beispiel mit dem Druckstil gesehen haben.

Deklarationen in @keyframes nehmen nicht an der Kaskade teil. Wie bei @font-face wird nur die gesamte @keyframes-Regel über den Kaskadenalgorithmus ausgewählt. Die Reihenfolge der Animationen ist unten beschrieben.

Im Falle von @import nimmt das @import selbst nicht an der Kaskade teil, aber alle importierten Stile machen es. Wenn das @import eine benannte oder anonyme Schicht definiert, werden die Inhalte des importierten Stilblattes in die angegebene Schicht platziert. Alle anderen mit @import importierten CSS werden als letzte deklarierte Schicht behandelt. Dies wurde bereits oben besprochen.

Schließlich folgt @charset spezifischen Algorithmen und ist nicht von dem Kaskadenalgorithmus betroffen.

Präsentationsattribute sind Attribute im Quelldokument, die das Styling beeinflussen können. Wenn sie enthalten sind, setzt das veraltete align-Attribut die Ausrichtung auf mehrere HTML-Elemente und das fill-Attribut definiert die Farbe, die verwendet wird, um SVG-Formen und -Text zu malen und den Endzustand für SVG-Animationen zu bestimmen. Obwohl sie Autorenstile sind, nehmen Präsentationsattribute nicht an der Kaskade 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 vor allen anderen Stilen mit einer Spezifität von 0 in das Autorenstilblatt eingefügt.

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

CSS-Animationen, die @keyframes-Regel verwenden, definieren Animationen zwischen Zuständen. @keyframes kaskadieren nicht, wodurch CSS zu jedem beliebigen Zeitpunkt Werte aus nur einem einzigen Satz @keyframes verwendet und niemals mehrere mischt. Wenn mehrere Sätze von @keyframes mit demselben Animationsnamen definiert sind, wird der zuletzt definierte Satz in der Herkunft und Ebene mit der größten Priorität verwendet. Andere @keyframes-Regel-Deklarationen werden ignoriert, selbst wenn sie unterschiedliche 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 keyframe-Animation, die in dem nicht geschichteten CSS definiert ist, hat Vorrang vor den geschichteten Deklarationen der keyframe-Animationen basierend auf dem Herkunfts- und Schichtenpräzedenzordnungs. In diesem Beispiel wird nur die Schriftgröße des Elements animiert.

Nachdem Ihr Inhalt die Stile fertig verändert hat, kann er sich in einer Situation befinden, in der er sie zu einem bekannten Zustand wiederherstellen muss. Dies kann in Fällen von Animationen, Themenänderungen und ähnlichem passieren. Die CSS-Eigenschaft all ermöglicht es Ihnen, schnell (fast) alles in CSS auf einen bekannten Zustand zurückzusetzen.

alle ermöglicht es Ihnen, sofort alle Eigenschaften auf ihren Anfangszustand, den Zustand, der von der vorherigen Ebene der Kaskade geerbt wurde, einen bestimmten Ursprung (das Benutzeragenten-Stilblatt, das Autoren-Stilblatt oder das Benutzer-Stilblatt) oder sogar die Werte der Eigenschaften vollständig zu löschen.

• Lernen: Konfliktbehandlung
• Lernen: Kaskadenschichten
• CSS-Kaskadierungs- und Vererbung Modul
• CSS-Syntax
• Spezifität
• Vererbung
• At-Rules
• Anfangs-, berechnete, verwendete und tatsächliche Werte