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 Herkunftstypen: Benutzeragenten-Stilblätter, Autorenstilblätter und Benutzerstilblätter.

Obwohl Stilblätter aus diesen unterschiedlichen Herkünften stammen und sich in verschiedenen Schichten innerhalb dieser Herkünfte befinden können, überschneiden sie sich hinsichtlich ihres Standardbereichs; um dies zu arrangieren, definiert der Kaskadenalgorithmus, wie sie interagieren. Bevor wir uns mit den Wechselwirkungen befassen, definieren wir in den nächsten Abschnitten einige wichtige Begriffe.

Benutzeragenten oder Browser haben grundlegende Stilblätter, die jedem Dokument Standardstile geben. Diese Stilblätter werden als Benutzeragenten-Stilblätter bezeichnet. Die meisten Browser verwenden tatsächliche Stilblätter zu diesem Zweck, während andere sie im Code simulieren. Das Endergebnis ist dasselbe.

Einige Browser erlauben 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 viel Spielraum: Das bedeutet, dass es einige Unterschiede zwischen Browsern gibt. Um den Entwicklungsprozess zu vereinfachen, können Webentwickler ein CSS-Reset-Stilblatt wie normalize.css verwenden, das allgemeine Eigenschaften auf einen bekannten Zustand für alle Browser setzt, bevor Änderungen zur Anpassung an spezifische Bedürfnisse vorgenommen werden.

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

Autorenstilblätter sind die häufigste Art von Stilblättern; diese Stile werden von Webentwicklern geschrieben. 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 verlinkter oder importierter Stilblätter, <style>-Blöcke und Inline-Stile, die mit dem style-Attribut definiert sind. Diese Autorenstile definieren das Aussehen und das Gefühl der Website — ihr Thema.

In den meisten Browsern kann der Benutzer (oder Leser) der Website wählen, Stile mit einem benutzerdefinierten Benutzerstilblatt 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 Browser-Erweiterungen hinzugefügt werden.

Die Kaskadenreihenfolge basiert auf dem Herkunftstyp. Die Kaskade innerhalb jedes Herkunftstyps basiert auf der Deklarationsreihenfolge von Kaskadenschichten innerhalb dieses Typs. Bei allen Herkünften - 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 ist. Stile, die außerhalb einer Schicht deklariert werden, gelten als Teil einer anonymen zuletzt deklarierten Schicht.

Schauen wir uns zunächst den Ursprungstyp der Kaskade an, bevor wir in die Kaskadenschichten innerhalb jedes Ursprungstyps eintauchen.

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

1. Relevanz: Er filtert zuerst alle Regeln aus den verschiedenen Quellen heraus, um nur die Regeln zu behalten, die für ein bestimmtes Element gelten. Das bedeutet Regeln, deren Selector mit dem gegebenen Element übereinstimmt und die Teil einer geeigneten media-At-Regel sind.

2. Herkunft und Wichtigkeit: Dann sortiert er diese Regeln nach ihrer Wichtigkeit, das heißt, ob sie von !important gefolgt sind oder nicht, und nach ihrer Herkunft. Wenn man die Schichten für den Moment ignoriert, ist die Kaskadenreihenfolge wie folgt:

   Reihenfolge (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-Übergänge

3. Spezifität: Bei Gleichheit bei der Herkunft wird die Spezifität einer Regel berücksichtigt, um einen Wert auszuwählen. Die Spezifität der Selector wird verglichen und die Deklaration mit der höchsten Spezifität gewinnt.

4. Berechtigungsnähe: Wenn zwei Selector in der vorrangigen Ursprungsschicht die gleiche Spezifität haben, gewinnt der Eigenschaftswert innerhalb eingrenzender Regeln mit der geringsten Anzahl von Sprüngen nach oben durch die DOM-Hierarchie zur Wurzel des Gültigkeitsbereichs. Siehe Wie @scope-Konflikte gelöst werden für mehr Details und ein Beispiel.

5. Reihenfolge des Erscheinens: In der vorrangigen Herkunft, wenn es konkurrierende Werte für eine Eigenschaft gibt, die in übereinstimmenden Stilblock-Selectors mit gleicher Spezifität und Berechtigungsnähe sind, wird die letzte Deklaration in der Stilreihenfolge angewandt.

Die Kaskade ist in aufsteigender Reihenfolge, was bedeutet, dass Animationen Vorrang vor normalen Werten haben, unabhängig davon, ob diese in Benutzer-, Autoren- oder Benutzeragentenstilen deklariert sind, wichtige Werte haben Vorrang vor Animationen und Übergänge haben Vorrang vor wichtigen Werten.

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

Bevor wir einen tieferen Blick darauf werfen, wie Kaskadenschichten die Kaskade beeinflussen, schauen wir uns ein Beispiel an, das mehrere CSS-Quellen aus den verschiedenen Herkünften einbezieht, und durchlaufen die Schritte des Kaskadenalgorithmus:

Hier haben wir ein Benutzeragenten-Stilblatt, zwei Autorenstilblätter und ein Benutzerstilblatt, ohne Inline-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 Erklärungen innerhalb der li- und .specific-Regeln gelten.

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

1. Relevanz
2. Herkunft und Wichtigkeit
3. Spezifität
4. Berechtigungsnähe
5. Reihenfolge des Erscheinens

Die 1px ist für Druckmedien. Aufgrund der fehlenden Relevanz basierend auf ihrem Medientyp, wird sie aus der Betrachtung entfernt.

Keine Erklärung ist als !important gekennzeichnet, daher ist die Vorrangreihenfolge Autorenstilblätter über Benutzerstilblätter über Benutzeragentenstilblatt. Basierend auf Herkunft und Wichtigkeit werden das 1em aus dem Benutzerstilblatt und das 10px aus dem Benutzeragenten-Stilblatt aus der Betrachtung entfernt.

Beachten Sie, dass selbst wenn der Benutzerstil auf .specific von 1em eine höhere Spezifität hat, handelt es sich um eine normale Erklärung in einem Benutzerstilblatt. Als solche hat es eine niedrigere Priorität als alle Autorenstile und wird durch den Schritt Herkunft und Bedeutung des Algorithmus entfernt, bevor die Spezifität überhaupt ins Spiel kommt.

Es gibt drei Erklärungen in Autorenstilblä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 ist Teil einer Kaskadenschicht. Normale Deklarationen in Schichten haben eine niedrigere Priorität als normale Stile, die nicht in einer Schicht innerhalb des gleichen Herkunftstyps sind. Diese wird ebenfalls durch Schritt 2 des Algorithmus, Herkunft und Wichtigkeit, entfernt.

Dies lässt die 0 und 3px übrig, die beide denselben Selector haben, daher dieselbe Spezifität. Keiner von ihnen befindet sich in einem @scope-Block, also kommt die Berechtigungsnähe in diesem Beispiel auch nicht zum Tragen.

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

margin-left: 3px;

Die Tabelle in Kaskadenreihenfolge gab einen Überblick über die Reihenfolge der Priorität. Die Tabelle fasste die Stile der Benutzeragenten, Benutzer und Autoren nach Herkunft in jeweils zwei Zeilen zusammen mit "Herkunftstyp - normal" und "Herkunftstyp - !important". Die Priorität innerhalb jedes Herkunftstyps ist nuancierter. Stile können innerhalb von Schichten innerhalb ihres Herkunftstyps 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, um die Priorität zu bestimmen. Normale Stile in einer Schicht haben Vorrang vor in vorherigen Schichten deklarierten Stilen; normale Stile, die außerhalb einer Schicht deklariert werden, haben Vorrang vor normalen geschichteten Stilen, unabhängig von ihrer Spezifität.

In diesem Beispiel hat der Autor CSS's @import-Regel verwendet, um fünf externe Stilblätter innerhalb eines <style>-Informationsblockes 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>

Im obigen CSS-Codeblock wurden in dieser Reihenfolge drei Kaskadenschichten mit den Namen "A", "B" und "C" erstellt. Drei Stilblätter wurden direkt in Schichten importiert und zwei wurden importiert, ohne eine Schicht zu erstellen oder zuzuweisen. Die "Alle ungelagerten Stile" in der Liste unten (normale Autorenstilreihenfolge - Reihenfolge 4) umfasst Stile aus diesen beiden Stilblättern und den zusätzlichen ungelagerten 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 die nicht wichtigen Stile, die in Schichten enthalten sind, die niedrigste Priorität. In unserem Beispiel haben die normalen Stile, die mit der ersten deklarierten Schicht (A) verbunden sind, eine niedrigere Priorität als die normalen 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 ungelagerten Stile, die normale Stile aus unlayeredStyles.css, moreUnlayeredStyles.css und die color von p im <style> selbst beinhalten.

Wenn einer der geschichteten Stile in A, B oder C Selector mit höherer Spezifität besitzt, die mit einem Element übereinstimmen, ähnlich :root body p { color: black;}, spielt es keine Rolle. Diese Erklärungen werden aufgrund von Herkunft aus der Betrachtung ausgeschlossen; normale geschichtete Stile haben weniger Priorität als normale ungelagerte Stile. Wenn jedoch der spezifischere Selector :root body p { color: black;} in unlayeredStyles.css gefunden würde, da Herkunft und Wichtigkeit die gleiche Priorität haben, würde Spezifität bedeuten, dass die spezifischere, schwarze Erklärung gewinnen würde.

Die Reihenfolge der Schichtpriorität wird für als !important deklarierte Stile umgekehrt. Wichtige Stile, die in einer Schicht deklariert werden, haben Vorrang vor wichtigen Stilen, die außerhalb einer Schicht deklariert werden. Wichtige Stile in der ersten deklarierten Schicht (A) haben Vorrang vor wichtigen Erklärungen, die in Schicht B gefunden werden, die wiederum Vorrang vor C haben, die Vorrang vor wichtigen Erklärungen in den ungelagerten Stilen haben.

Nur für Autorenstile bedeutsam 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 Selectors. Wenn line-height: 2; in einem :root body p-Selector-Block in einem der fünf importierten Stilblätter deklariert würde, wäre die Zeilenhöhe immer noch 1.6.

Normale Inline-Stile haben Vorrang vor allen anderen normalen Autorenstilen, es sei denn, die Eigenschaft wird durch eine CSS-Animation verändert.

Alle wichtigen Inline-Stile haben Vorrang vor allen Autorenstilen, wichtig und nicht, inline und nicht, geschichtet und nicht. Wichtige Stile haben auch Vorrang vor animierten Eigenschaften, aber nicht vor Übergangseigenschaften. Drei Dinge können einen wichtigen Inline-Stil überschreiben: 1) ein wichtiger Benutzerstil, 2) ein wichtiger Benutzeragentstil oder 3) ein Wert, der über einen Übergang eingestellt wird.

Die Reihenfolge der Herkunftstyp-Priorität wird für wichtige Stile umgekehrt. Wichtige Stile, die außerhalb jeder Kaskadenschicht deklariert werden, haben eine niedrigere Priorität als solche, die als Teil einer Schicht deklariert werden. Wichtige Werte, die in frühen Schichten kommen, haben Vorrang vor wichtigen Stilen, die in nachfolgenden Kaskadenschichten deklariert werden.

Betrachten Sie zum Beispiel das folgende CSS:

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

Obwohl das Rot zuerst deklariert wird und einen weniger spezifischen Selector hat, weil ungelagertes CSS Vorrang vor geschichtetem CSS hat, wird der Absatz rot sein. Hätten wir einen Inline-Stil auf dem Absatz eingestellt, der ihn auf eine andere Farbe setzen würde, wie <p style="color: black">, würde der Absatz schwarz sein.

Wenn wir !important zu diesem CSS-Fragment 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ühest deklarierten Schicht hat Vorrang vor nachfolgenden Schichten und ungelagerten wichtigen Deklarationen. Wenn der Inline-Stil !important enthalten würde, wie <p style="color: black !important">, wäre der Absatz wieder schwarz. Inline-Bedeutung hat 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 von der Herkunft oder wie sie deklariert wurden.

Jetzt, da wir ein besseres Verständnis von Herkunftstyp- und Kaskadenschicht-Priorität haben, erkennen wir, dass die Tabelle in Kaskadenreihenfolge genauer durch die folgende Tabelle dargestellt werden könnte:

Nur CSS-Eigenschafts-/Wertpaar-Deklarationen nehmen an der Kaskade teil. CSS-At-Regel-Beschreibungen nehmen nicht an der Kaskade teil und HTML-präsentative Attribute sind nicht Teil der Kaskade.

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

Zum größten Teil nehmen die in At-Regeln definierten Eigenschaften und Beschreibungen nicht an der Kaskade teil. Nur At-Regeln selbst nehmen an der Kaskade teil. Zum Beispiel werden innerhalb einer @font-face-Regel Schriftnamen durch font-family-Beschreibungen identifiziert. Wenn mehrere @font-face-Regeln mit derselben Beschreibung definiert sind, wird nur die passendste @font-face als Ganzes betrachtet. Wenn mehr als eine identisch passend ist, werden die gesamten @font-face-Deklarationen mit den Schritten 1, 2 und 4 des Algorithmus verglichen (es gibt keine Spezifität, wenn es um At-Regeln geht).

Während die in den meisten At-Regeln enthaltenen Deklarationen — wie diejenigen in @media, @document oder @supports — an der Kaskade teilnehmen, könnte die At-Regel einen gesamten Selector als nicht relevant machen, 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 @keyframes-Regel als Ganzes über den Kaskadenalgorithmus ausgewählt. Die Prioritätsordnung von Animationen wird im Folgenden beschrieben.

Wenn es um @import geht, nimmt @import selbst nicht an der Kaskade teil, aber alle importierten Stile nehmen daran teil. Wenn @import eine benannte oder anonyme Schicht definiert, werden die Inhalte des importierten Stilblatts in die angegebene Schicht eingefügt. Alle anderen mit @import importierten CSS werden als letzte deklarierte Schicht behandelt. Dies wurde oben diskutiert.

Schließlich gehorcht @charset bestimmten Algorithmen und wird nicht vom Kaskadenalgorithmus beeinflusst.

Präsentative Attribute sind Attribute im Quelldokument, die das Styling beeinflussen können. Zum Beispiel setzt das veraltete align-Attribut die Ausrichtung auf mehreren HTML-Elementen und das fill-Attribut definiert die Farbe, die zum Malen von SVG-Formen und -Texten verwendet wird, und definiert den Endzustand für SVG-Animationen. Obwohl sie Autorenstile sind, nehmen Präsentative Attribute 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 in das Autorenstilblatt vor allen anderen Stilen mit einer Spezifität gleich 0 eingefügt.

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

CSS-Animationen, die @keyframes-Regeln verwenden, definieren Animationen zwischen Zuständen. Keyframes kaskadieren nicht, das bedeutet, dass zu jedem gegebenen Zeitpunkt CSS nur Werte aus einem einzigen @keyframes annimmt und nie mehrere zusammen mischt.

Wenn mehrere Keyframe-Animationen mit demselben Animationsnamen definiert sind, wird die zuletzt definierte @keyframes in der Herkunft und Schicht mit der größten Priorität verwendet. Nur eine @keyframes-Definition wird verwendet, selbst wenn die @keyframes unterschiedliche Eigenschaften animiert. @keyframes mit demselben Namen werden niemals kombiniert.

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 ungelagerten CSS deklariert ist, hat Vorrang vor den geschichteten Keyframe-Animationsdeklarationen, basierend auf der Herkunfts- und Kaskaden-Schicht-Prioritätsordnung. In diesem Beispiel wird nur die Schriftgröße des Elements animiert.

Nachdem Ihr Inhalt das Styling beendet hat, kann es in einer Situation sein, in der es die Stile auf einen bekannten Zustand zurücksetzen muss. Dies kann in Fällen von Animationen, Themenänderungen und dergleichen passieren. Die CSS-Eigenschaft all ermöglicht Ihnen, schnell (fast) alles in CSS auf einen bekannten Zustand zurückzusetzen.

all ermöglicht Ihnen die sofortige Wiederherstellung aller Eigenschaften auf einen ihrer ursprünglichen (standardmäßigen) Zustände, den von der vorherigen Ebene der Kaskade geerbten Zustand, eine bestimmte Herkunft (das Benutzeragenten-Stilblatt, das Autorenstilblatt oder das Benutzerstilblatt) oder sogar das vollständige Löschen der Werte der Eigenschaften.

• Lernen: Umgang mit Konflikten
• Lernen: Kaskadenschichten
• CSS-Kaskade und Vererbung Modul
• CSS-Syntax
• Spezifität
• Vererbung
• At-Regeln
• Empfohlene, berechnete, verwendete und tatsächliche Werte