Einführung in die CSS-Kaskade

Die Aufgabe des CSS-Kaskadenalgorithmus besteht darin, CSS-Deklarationen auszuwählen, um die richtigen Werte für CSS-Eigenschaften zu bestimmen. CSS-Deklarationen stammen aus verschiedenen Herkunftstypen: Benutzeragenten-Stilblätter, Autoren-Stilblätter und Benutzer-Stilblätter.

Obwohl Stilblätter aus diesen unterschiedlichen Herkünften stammen und in jeder dieser Herkünfte in verschiedenen Schichten vorhanden sein können, überschneiden sie sich hinsichtlich ihres Standardscope; um dies zu ermöglichen, definiert der Kaskadenalgorithmus, wie sie interagieren. Bevor wir uns mit den Interaktionen befassen, werden wir in den nächsten Abschnitten einige Schlüsselbegriffe definieren.

Benutzeragenten, oder Browser, haben grundlegende Stilblätter, die Standardstile für jedes Dokument bereitstellen. Diese Stilblätter werden Benutzeragenten-Stilblätter genannt. 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 kontrolliert werden.

Obwohl einige Einschränkungen für Benutzeragenten-Stilblätter durch die HTML-Spezifikation festgelegt sind, haben Browser große Freiheiten: Das bedeutet, dass es einige Unterschiede zwischen den Browsern gibt. Um den Entwicklungsprozess zu vereinfachen, können Webentwickler ein CSS-Reset-Stilblatt verwenden, wie normalize.css, das bekannte Eigenschaftswerte für alle Browser auf einen bekannten Zustand setzt, bevor Änderungen vorgenommen werden, um den spezifischen Bedürfnissen zu entsprechen.

Sofern das Benutzeragenten-Stilblatt kein !important neben einer Eigenschaft enthält und diese „wichtig“ macht, haben von Autoren deklarierte 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 der häufigste Stilblatt-Typ; dies 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 eines oder mehrerer verknüpfter oder importierter Stilblätter, <style>-Blocken und eingebetteten Stilen, die mit dem style-Attribut definiert sind. Diese Autorenstile definieren das Aussehen und das Thema der Website – ihr Thema.

In den meisten Browsern kann der Benutzer (oder Leser) der Website wählen, Stile mit einem benutzerdefinierten Benutzerstilblatt zu überschreiben, um 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 Herkunftstyp. Die Kaskade innerhalb jedes Herkunftstyps basiert auf der Deklarationsreihenfolge der Kaskadenschichten innerhalb dieses Typs. Für alle Herkünfte - Benutzeragenten, Autoren oder Benutzer - können Stile innerhalb oder außerhalb benannter oder anonymer Schichten deklariert werden. Wenn sie unter Verwendung von layer, layer() oder @layer deklariert werden, werden Stile in die angegebene benannte Schicht oder in eine anonyme Schicht platziert, wenn kein Name angegeben wird. Stile, die außerhalb einer Schicht deklariert sind, werden als Teil einer anonymen zuletzt deklarierten Schicht betrachtet.

Werfen wir einen Blick auf die kaskadierende Herkunft, bevor wir auf die Kaskadenschichten innerhalb jedes Herkunftstyps eingehen.

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

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

2. Herkunft und Wichtigkeit: Dann sortiert er diese Regeln nach ihrer Wichtigkeit, d.h., ob sie von !important gefolgt werden oder nicht, und nach ihrer Herkunft. Ignorieren wir für den Moment die Schichten, ist die Kaskadenreihenfolge wie folgt:

   Prioritätsreihenfolge (niedrig bis hoch)	Herkunft	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-Transitionen

3. Spezifität: Im Fall von Gleichheit bei einer Herkunft wird die Spezifität einer Regel betrachtet, um einen Wert auszuwählen. Die Spezifität der Selektoren wird verglichen, und die Deklaration mit der höchsten Spezifität gewinnt.

4. Nahbereich der Abdeckung: Wenn zwei Selektoren in der Ursprungs-Ebene mit Vorrang die gleiche Spezifität haben, gewinnt der Eigenschaftswert innerhalb abgedeckter Regeln mit der geringsten Anzahl von Sprüngen die DOM-Hierarchie hinauf zum Ursprung. Siehe Wie @scope-Konflikte gelöst werden für weitere Details und ein Beispiel.

5. Reihenfolge des Erscheinens: In der Herkunft mit Vorrang, wenn es konkurrierende Werte für eine Eigenschaft gibt, die sich in Stileblöcken mit passenden Selektoren gleicher Spezifität und Nahbereich der Abdeckung befinden, wird die letzte Deklaration in der Stilreihenfolge angewendet.

Die Kaskade ist in aufsteigender Reihenfolge, das bedeutet:

• Animationen haben Vorrang vor normalen Werten, ob sie in Benutzer-, Autoren- oder Benutzeragenten-Stilen deklariert sind.
• Wichtige Werte haben Vorrang vor Animationen, ob sie in Benutzer-, Autoren- oder Benutzeragenten-Stilen deklariert sind.
• Transitionen haben Vorrang vor wichtigen Werten.

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

Bevor wir einen tieferen Blick darauf werfen, wie Kaskadenschichten die Kaskade beeinflussen, sehen wir uns ein Beispiel mit mehreren Quellen von CSS aus den verschiedenen Herkünften an und gehen wir durch die Schritte des Kaskadenalgorithmus:

Hier haben wir ein Benutzeragenten-Stilblatt, zwei Autoren-Stilblätter und ein Benutzer-Stilblatt, ohne eingebettete Stile im 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 Reihenfolge:

1. Relevanz
2. Herkunft und Wichtigkeit
3. Spezifität
4. Nahbereich der Abdeckung
5. Reihenfolge des Erscheinens

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

Keine Deklaration ist als !important markiert, sodass die Prioritätsreihenfolge ist: Autoren-Stilblätter über Benutzer-Stilblätter über das Benutzeragenten-Stilblatt. Basierend auf Herkunft und Wichtigkeit, werden das 1em aus dem Benutzerstilblatt und das 10px aus dem Benutzeragenten-Stilblatt aus der Betrachtung ausgeschlossen.

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 Benutzerstilblatt handelt. Daher hat es eine niedrigere Priorität als alle Autorenstile und wird durch den Herkunfts- und Wichtigkeitsschritt 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, die 5px-Deklaration, ist Teil einer Kaskadenschicht. Normale Deklarationen in Schichten haben niedrigere Priorität als normale Stile, die nicht in einer Schicht innerhalb desselben Herkunftstyps sind. Dies wird auch durch Schritt 2 des Algorithmus entfernt, Herkunft und Wichtigkeit.

Dies lässt die 0 und die 3px, die beide den gleichen Selektor haben, daher die gleiche Spezifität. Keiner von ihnen befindet sich innerhalb eines @scope-Blocks, sodass die Nahbereich der Abdeckung in diesem Beispiel auch nicht ins Spiel kommt.

Wir betrachten dann die Reihenfolge des Erscheinens. Die zweite, die letzte der beiden nicht geschichteten Autorenstile, gewinnt.

margin-left: 3px;

Die Tabelle in Kaskadenreihenfolge gibt einen Überblick über die Prioritätsreihenfolge. Die Tabelle fasste die Benutzeragent-, Benutzer- und Autoren-Ursprungstypen in zwei Zeilen zusammen mit „Ursprungstyp - Normal“ und „Ursprungstyp - !wichtig“. Die Priorität innerhalb jedes Ursprungstyps ist nuancierter. Stile können innerhalb von Schichten innerhalb ihres Ursprungstyps enthalten sein, und bei Autorenstilen gibt es auch das Problem, wo Inline-Stile in die Kaskadenreihenfolge fallen.

Die Reihenfolge, in der Schichten deklariert werden, ist wichtig, um die Priorität zu bestimmen. Normale Stile in einer Schicht haben Vorrang vor Stilen, die in vorherigen Schichten deklariert wurden; normale Stile, die außerhalb einer Schicht deklariert werden, haben Vorrang vor normalen geschichteten Stilen, unabhängig von der Spezifität.

In diesem Beispiel hat der Autor die @import-Regel von CSS verwendet, um fünf externe Stilblätter innerhalb eines <style>-Informationsblocks 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 oben gezeigten 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 importiert, ohne eine Schicht zu erstellen oder zuzuweisen. Die "Alle ungeschichteten Stile" in der folgenden Liste (normale Priorität für Autorenstile - Ordnung 4) umfasst Stile aus diesen beiden Stilblättern und den zusätzlichen ungeschichteten 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 mit den ersten deklarierten Schichten (A) verbundenen normalen Stile eine niedrigere Priorität als normale Stile in der zweiten deklarierten Schicht (B), die eine niedrigere Priorität haben als normale Stile in der dritten deklarierten Schicht (C). Diese geschichteten Stile haben eine niedrigere Priorität als alle normalen ungeschichteten Stile, die normale Stile aus unlayeredStyles.css, moreUnlayeredStyles.css und das color-Attribut von p im <style> selbst umfassen.

Wenn irgendein geschichteter Stil in A, B oder C Selektoren mit höherer Spezifität hat, die ein Element treffen, ähnlich wie :root body p { color: black; }, spielt das keine Rolle. Diese Deklarationen werden aufgrund der Herkunft nicht berücksichtigt; normale geschichtete Stile haben weniger Vorrang als normale ungeschichtete Stile. Wenn jedoch der spezifischere Selektor :root body p { color: black; } in unlayeredStyles.css gefunden wird, da sowohl Herkunft als auch Wichtigkeit die gleiche Priorität haben, würde die Spezifität bedeuten, dass die spezifischere schwarze Deklaration gewinnen würde.

Die Prioritätsreihenfolge der Schichten 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 in Schicht B, die Vorrang vor wichtigen Deklarationen in Schicht C haben, die Vorrang vor wichtigen Deklarationen haben, die außerhalb einer Schicht gefunden werden.

Für Autorenstile sind nur Inline-Stile relevant, 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 einem :root body p-Selektorblock in einem der fünf importierten Stilblätter deklariert wäre, wäre die Zeilenhöhe immer noch 1.6. Normale Inline-Stile haben jedoch keinen Vorrang vor animierten oder übergangenen Eigenschaften.

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, nicht jedoch vor übergangenen Eigenschaften. Drei Dinge können einen wichtigen Inline-Stil überschreiben:

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

Die Prioritätsreihenfolge des Herkunftstyps ist für wichtige Stile umgekehrt. Wichtige Stile, die außerhalb einer beliebigen Kaskadenschicht deklariert werden, haben eine niedrigere Priorität als diejenigen, die als Teil einer Schicht deklariert werden. Wichtige Stile, die in frühen Schichten kommen, haben Vorrang vor wichtigen Stilen, die in nachfolgenden Kaskadenschichten deklariert werden.

Nehmen wir zum Beispiel das folgende CSS:

p {
  color: red;
}

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

Selbst wenn das Rot zuerst deklariert wurde und einen weniger spezifischen Selektor hat, weil ungeschichtetes CSS Vorrang vor geschichtetem CSS hat, wird der Absatz rot sein. Hätten wir einen Inline-Stil dem Absatz zugewiesen, der ihn anders färbt, wie <p style="color: black">, wäre der Absatz schwarz.

Wenn wir !important zu diesem Stück CSS 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ühesten deklarierten Schicht hat Vorrang vor nachfolgenden Schichten und ungeschichteten wichtigen Deklarationen. Wenn der Inline-Stil !important enthielte, wie <p style="color: black !important">, wäre der Absatz wieder schwarz. Innerhalb der Wichtigkeit haben Inline-Stile Vorrang vor allen anderen von Autoren 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 werden.

Jetzt, da wir ein besseres Verständnis für Herkunfts- und Kaskadenschichtpriorität haben, erkennen wir, dass die Tabelle in Kaskadenreihenfolge genauer durch die folgende Tabelle dargestellt werden könnte:

Nur CSS-Eigenschaftswerte-Paar-Deklarationen sind an der Kaskade beteiligt. CSS-At-Regel-Deskriptoren sind nicht an der Kaskade beteiligt, und HTML-Präsentationsattribute sind nicht Teil der Kaskade.

CSS-At-Regeln, die andere Entitäten als Deklarationen enthalten, wie eine @font-face-Regel, die Deskriptoren enthält, sind nicht an der Kaskade beteiligt.

Zum größten Teil sind die in At-Regeln definierten Eigenschaften und Deskriptoren nicht Teil der Kaskade. Nur At-Regeln als Ganzes sind an der Kaskade beteiligt. Zum Beispiel innerhalb einer @font-face-Regel, werden Schriftartnamen durch font-family-Deskriptoren identifiziert. Wenn mehrere @font-face-Regeln mit demselben Deskriptor definiert sind, wird nur die am besten geeignete @font-face als Ganzes betrachtet. Wenn mehr als eine gleich geeignet ist, werden die gesamten @font-face-Deklarationen anhand der Schritte 1, 2 und 4 des Algorithmus verglichen (es gibt keine Spezifität, wenn es um At-Regeln geht).

Während die Deklarationen, die in den meisten At-Regeln enthalten sind — wie diejenigen in @media, @document, oder @supports — an der Kaskade beteiligt sind, kann die At-Regel einen gesamten Selektor irrelevant machen, wie wir es im einfachen Beispiel mit der Print-Stilregel gesehen haben.

Deklarationen in @keyframes sind nicht Teil der Kaskade. Wie bei @font-face, wird nur das @keyframes als Ganzes über den Kaskadenalgorithmus ausgewählt. Die Prioritätsreihenfolge von Animationen wird unten beschrieben.

Wenn es um @import geht, ist das @import selbst nicht an der Kaskade beteiligt, aber alle importierten Stile sind es. Wenn das @import eine benannte oder anonyme Schicht definiert, werden die Inhalte des importierten Stilblatts in die angegebene Schicht platziert. Alle anderen mit @import importierten CSS werden als letzte deklarierte Schicht betrachtet. Dies wurde oben diskutiert.

Schließlich befolgt @charset spezifische Algorithmen und wird nicht durch den Kaskadenalgorithmus beeinflusst.

Präsentationsattribute sind Attribute im Quelldokument, die das Styling beeinflussen können. Beispielsweise legt das veraltete align-Attribut, wenn es enthalten ist, die Ausrichtung auf mehreren HTML-Elementen fest und das fill-Attribut definiert die Farbe, die verwendet wird, um SVG-Formen und Text zu malen, und definiert den Endzustand für SVG-Animationen. Obwohl sie Autorenstile sind, sind Präsentationsattribute nicht Teil der Kaskade.

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 Autorenstilblatt vor allen anderen Stilen mit einer Spezifität gleich 0 eingefügt.

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

CSS-Animationen, die @keyframes-At-Regeln verwenden, definieren Animationen zwischen Zuständen. @keyframes sind nicht Teil der Kaskade, das bedeutet, dass CSS zu jedem gegebenen Zeitpunkt Werte nur aus einem einzigen Set von @keyframes nimmt und niemals mehrere mischt. Wenn mehrere Sets von @keyframes mit demselben Animationsnamen definiert sind, wird das letzte definierte Set in der Herkunft und Schicht mit der höchsten 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 keyframe-Animation, die im ungeschichteten CSS definiert ist, hat Vorrang vor den geschichteten keyframe-Animationsdeklarationen basierend auf der Herkunfts- und Schichtprioritätsreihenfolge. In diesem Beispiel wird nur die Schriftgröße des Elements animiert.

Nachdem Ihre Inhalte das Stylesheet verändert haben, kann es sein, dass sie sich in einer Situation befinden, in der sie es auf einen bekannten Zustand zurücksetzen müssen. Dies kann bei Animationen, Themenänderungen usw. der Fall sein. Die CSS-Eigenschaft all ermöglicht es Ihnen, (fast) alles in CSS schnell auf einen bekannten Zustand zurückzusetzen.

all ermöglicht es Ihnen, sofort alle Eigenschaften auf ihren ursprünglichen (Standard-)Zustand zurückzusetzen, den Zustand, der vom vorherigen Level der Kaskade geerbt wurde, eine bestimmte Herkunft (das Benutzeragenten-Stilblatt, das Autoren-Stilblatt oder das Benutzer-Stilblatt), oder sogar die Werte der Eigenschaften vollständig zu löschen.

• Lernen: Konflikte behandeln
• Lernen: Kaskadenschichten
• CSS-Kaskade und Vererbung-Modul
• CSS-Syntax
• Spezifität
• Vererbung
• At-Regeln
• Initial, berechnet, verwendet und aktuelle Werte