Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
Einführung in die CSS-Kaskade
Die Kaskade ist ein Algorithmus, der definiert, wie Benutzeragenten Eigenschaftswerte aus verschiedenen Quellen kombinieren. Die Kaskade definiert den Ursprung und die Schicht, die den Vorrang hat, wenn Deklarationen aus mehr als einem Ursprung, einer Kaskadenschicht oder einem @scope-Block einen Wert für eine Eigenschaft eines Elements festlegen.
Die Kaskade liegt im Kern von CSS, wie der Name betont: Cascading Style Sheets. Wenn ein Selektor mit einem Element übereinstimmt, wird der Eigenschaftswert aus dem Ursprung mit der höchsten Priorität angewendet, selbst wenn der Selektor aus einem Ursprung oder einer Schicht mit niedrigerer Priorität eine höhere Spezifität aufweist.
Dieser Artikel erklärt, was die Kaskade ist und in welcher Reihenfolge CSS-Deklarationen kaskadieren, einschließlich der Kaskadenschichten und Ursprungstypen. Das Verständnis der Ursprungspriorität ist der Schlüssel zum Verständnis der Kaskade.
Ursprungstypen
Die Aufgabe des CSS-Kaskaden-Algorithmus besteht darin, CSS-Deklarationen auszuwählen, um die korrekten Werte für CSS-Eigenschaften zu bestimmen. CSS-Deklarationen stammen aus verschiedenen Ursprungstypen: Benutzeragenten-Stylesheets , Autor-Stylesheets und Benutzer-Stylesheets .
Obwohl Stylesheets aus diesen verschiedenen Ursprüngen stammen und sich in unterschiedlichen Schichten innerhalb dieser Ursprünge befinden können, überschneiden sie sich hinsichtlich ihres Standardbereichs. Um dies zu ermöglichen, definiert der Kaskaden-Algorithmus, wie sie miteinander interagieren. Bevor wir uns mit den Interaktionen befassen, werden wir in den nächsten Abschnitten einige Schlüsselbegriffe definieren.
Benutzeragenten-Stylesheets
Benutzeragenten, oder Browser, haben grundlegende Stylesheets, die Dokumenten Standardstile verleihen. Diese Stylesheets werden als Benutzeragenten-Stylesheets bezeichnet. Die meisten Browser verwenden für diesen Zweck tatsächliche Stylesheets, während andere sie im Code simulieren. Das Endergebnis ist dasselbe.
Einige Browser erlauben es Benutzern, das Benutzeragenten-Stylesheet zu ändern, aber das ist selten und nicht steuerbar.
Obwohl einige Einschränkungen für Benutzeragenten-Stylesheets durch die HTML-Spezifikation festgelegt sind, haben Browser viel Spielraum, was bedeutet, dass es einige Unterschiede zwischen den Browsern gibt. Um den Entwicklungsprozess zu vereinfachen, verwenden Webentwickler möglicherweise ein CSS-Reset-Stylesheet wie normalize.css, das gemeinsame Eigenschaftswerte auf einen bekannten Zustand für alle Browser setzt, bevor Anpassungen vorgenommen werden, um ihren spezifischen Anforderungen zu entsprechen.
Es sei denn, das Benutzeragenten-Stylesheet enthält ein !important neben einer Eigenschaft, die es "wichtig" macht, haben vom Autor deklarierte Stile, einschließlich eines Reset-Stylesheets, Vorrang vor den Benutzeragenten-Stilen, unabhängig von der Spezifität des zugehörigen Selektors.
Autor-Stylesheets
Autor-Stylesheets sind die häufigste Art von Stylesheets; dies sind die vom Webentwickler geschriebenen Stile. 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 unter Verwendung eines oder mehrerer verlinkter oder importierter Stylesheets, <style>-Blöcke und Inline-Stile, die mit dem style-Attribut definiert sind. Diese Autorenstile definieren das Aussehen und Gefühl der Website — deren Thema.
Benutzer-Stylesheets
In den meisten Browsern kann der Benutzer (oder Leser) der Website die Stile mit einem benutzerdefinierten Benutzer-Stylesheet überschreiben, das darauf ausgelegt ist, die Erfahrung an die Wünsche des Benutzers anzupassen. Abhängig vom Benutzeragenten können Benutzerstile konfiguriert oder über Browser-Erweiterungen hinzugefügt werden.
Kaskadenschichten
Die Kaskadenreihenfolge basiert auf dem Ursprungstyp. Die Kaskade innerhalb jedes Ursprungstyps basiert auf der Deklarationsreihenfolge der Kaskadenschichten innerhalb dieses Typs. Bei allen Ursprüngen - Benutzeragent, Autor oder Benutzer - können Stile innerhalb oder außerhalb benannter oder anonymer Schichten deklariert werden. Wenn Stile mit layer, layer() oder @layer deklariert werden, werden sie in die angegebene benannte Schicht oder, wenn kein Name angegeben ist, in eine anonyme Schicht eingefügt. Stile, die außerhalb einer Schicht deklariert werden, werden als Teil einer anonym zuletzt deklarierten Schicht behandelt.
Werfen wir einen Blick auf den kaskadierenden Ursprungstyp, bevor wir uns mit den Kaskadenschichten innerhalb jedes Ursprungstyps befassen.
Kaskadenreihenfolge
Der Kaskadenalgorithmus bestimmt, wie der anzuwendende Wert für jede Eigenschaft für jedes Dokumentelement ermittelt wird. Die folgenden Schritte gelten für den Kaskadenalgorithmus:
-
Relevanz: Zuerst filtert er alle Regeln aus den verschiedenen Quellen, um nur die Regeln zu behalten, die für ein gegebenes Element gelten. Das bedeutet Regeln, deren Selektor mit dem gegebenen Element übereinstimmt und die Teil eines passenden
media-Regeln sind. -
Ursprung und Wichtigkeit: Dann sortiert er diese Regeln nach ihrer Wichtigkeit, d.h. ob sie
!importantsind oder nicht, und nach ihrem Ursprung. Unabhängig von den Schichten ist die Kaskadenreihenfolge wie folgt:Prioritätsreihenfolge (niedrig bis hoch) Ursprung Wichtigkeit 1 Benutzeragent (Browser) normal 2 Benutzer normal 3 Autor (Entwickler) normal 4 CSS-Schlüsselbild-Animationen 5 Autor (Entwickler) !important6 Benutzer !important7 Benutzeragent (Browser) !important8 CSS-Transitions -
Spezifität: Bei Gleichheit innerhalb eines Ursprungs 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.
-
Spezifität der Bereichsnähe: Wenn zwei Selektoren in der Ursprungsgruppe mit Vorrang die gleiche Spezifität haben, gewinnt der Eigenschaftswert innerhalb von bereichsgesteuerten Regeln mit der geringsten Anzahl von Hops im DOM-Hierarchie zum Bereichswurzel. Siehe Wie
@scope-Konflikte gelöst werden für mehr Details und ein Beispiel. -
Erscheinungsreihenfolge: Im Ursprung mit Vorrang, wenn es konkurrierende Werte für eine Eigenschaft gibt, die in einem Stilblock sind, der mit Selektoren von gleicher Spezifität und Bereichsnähe übereinstimmt, 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-, Autor- oder Benutzeragenten-Stilen deklariert sind.
- Wichtige Werte haben Vorrang vor Animationen, unabhängig davon, ob sie in Benutzer-, Autor- oder Benutzeragenten-Stilen deklariert sind.
- Übergänge haben Vorrang vor wichtigen Werten.
Hinweis: Übergänge und Animationen
Eigenschaftswerte, die durch Animation @keyframes gesetzt werden, sind wichtiger als alle normalen Stile (die ohne !important gesetzt sind).
Eigenschaftswerte, die in einem transition festgelegt werden, haben Vorrang vor allen anderen gesetzten Werten, selbst wenn sie mit !important markiert sind.
Der Kaskadenalgorithmus wird vor dem Spezifitätsalgorithmus angewendet, was bedeutet, dass, wenn :root p { color: red; } im Benutzer-Stylesheet (Zeile 2) deklariert ist und ein weniger spezifisches p { color: blue; } im Autor-Stylesheet (Zeile 3) enthalten ist, die Absätze blau sein werden.
Einfaches Beispiel
Bevor wir einen tieferen Blick darauf werfen, wie Kaskadenschichten die Kaskade beeinflussen, schauen wir uns ein Beispiel an, das mehrere Quellen von CSS über die verschiedenen Ursprünge hinweg einbezieht, und arbeiten die Schritte des Kaskadenalgorithmus durch:
Hier haben wir ein Benutzeragenten-Stylesheet, zwei Autor-Stylesheets und ein Benutzer-Stylesheet, ohne Inline-Stile im HTML:
Benutzeragenten-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 von li und .specific-Regeln angewendet werden.
Nochmals, es gibt fünf Schritte im Kaskadenalgorithmus, in der Reihenfolge:
- Relevanz
- Ursprung und Wichtigkeit
- Spezifität
- Bereichsnähe
- Erscheinungsreihenfolge
Das 1px ist für Printmedien. Aufgrund des Mangels an Relevanz basierend auf seinem Medientyp wird es aus der Betrachtung entfernt.
Keine Deklaration ist als !important markiert, daher ist die Prioritätsordnung Autor-Stylesheets über Benutzer-Stylesheets über Benutzeragenten-Stylesheets. Basierend auf Ursprung und Wichtigkeit wird das 1em aus dem Benutzer-Stylesheet und das 10px aus dem Benutzeragenten-Stylesheet aus der Betrachtung entfernt.
Beachten Sie, dass selbst wenn der Benutzerstil auf .specific von 1em eine höhere Spezifität hat, er eine normale Deklaration in einem Benutzer-Stylesheet ist. Daher hat er eine niedrigere Priorität als alle Autorenstile und wird durch den Schritt Ursprung und Wichtigkeit des Algorithmus entfernt, bevor die Spezifität überhaupt 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;
}
}
Der letzte, das 5px, ist Teil einer Kaskadenschicht. Normale Deklarationen in Schichten haben innerhalb desselben Ursprungstyps eine niedrigere Priorität als normale Stile außerhalb einer Schicht. Dies wird auch durch Schritt 2 des Algorithmus, Ursprung und Wichtigkeit, entfernt.
Dies hinterlässt das 0 und das 3px, die beide denselben Selektor haben und daher dieselbe Spezifität aufweisen. Keiner von ihnen befindet sich in einem @scope-Block, sodass die Bereichsnähe in diesem Beispiel ebenfalls keine Rolle spielt.
Dann betrachten wir die Erscheinungsreihenfolge. Der zweite, der letzte der beiden ungeschichteten Autorenstile, gewinnt.
margin-left: 3px;
Hinweis: Die im Benutzer-CSS definierte Deklaration, obwohl sie möglicherweise eine größere Spezifität aufweist, wird nicht ausgewählt, da der Kaskadenalgorithmus Ursprung und Wichtigkeit vor dem Spezifitätsalgorithmus anwendet. Die in einer Kaskadenschicht definierte Deklaration, obwohl sie später im Code vorkommt, erhält ebenfalls keinen Vorrang, da normale Stile in Kaskadenschichten eine geringere Priorität haben als normale ungeschichtete Stile. Erscheinungsreihenfolge ist nur wichtig, wenn sowohl Ursprung, Wichtigkeit als auch Spezifität gleich sind.
Autorstile: Inline-Stile, Schichten und Vorrang
Die Tabelle in Kaskadenreihenfolge lieferte einen Überblick über die Vorrangordnung. Die Tabelle fasste die Benutzeragenten-, Benutzer- und Autor-Ursprung-Stile in zwei Zeilen zusammen, mit "Ursprungstyp - normal" und "Ursprungstyp - !important". Der Vorrang innerhalb jedes Ursprungstyps ist nuancierter. Stile können innerhalb ihrer Ursprungstyp in Schichten enthalten sein und bei Autorenstilen gibt es auch die Frage, wo Inline-Stile in der Kaskadenreihenfolge landen.
Die Reihenfolge, in der Schichten deklariert werden, ist wichtig, um den Vorrang zu bestimmen. Normale Stile in einer Schicht haben Vorrang vor Stilen, die in vorherigen Schichten deklariert wurden; wobei normale Stile, die außerhalb einer Schicht deklariert sind, Vorrang vor normalen geschichteten Stilen haben, unabhängig von der Spezifität.
In diesem Beispiel hat der Autor die CSS-@import-Regel verwendet, 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>
Im obigen CSS-Codeblock wurden drei Kaskadenschichten mit den Namen "A", "B" und "C" erstellt, in dieser Reihenfolge. Drei Stylesheets wurden direkt in Schichten importiert und zwei wurden importiert, ohne eine Schicht zu erstellen oder zugewiesen zu werden. Die "Alle ungeschichteten Stile" in der Liste unten (normaler Vorrang der Autorenstile - Ordnung 4) umfassen 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:
| Prioritätsreihenfolge (niedrig bis hoch) | Autorstil | Wichtigkeit |
|---|---|---|
| 1 | A - erste Schicht | normal |
| 2 | B - zweite Schicht | normal |
| 3 | C - letzte Schicht | normal |
| 4 | Alle ungeschichteten Stile | normal |
| 5 | Inline-style |
normal |
| 6 | Animationen | |
| 7 | Alle ungeschichteten Stile | !important |
| 8 | C - letzte Schicht | !important |
| 9 | B - zweite Schicht | !important |
| 10 | A - erste Schicht | !important |
| 11 | Inline-style |
!important |
| 12 | Übergänge |
Bei allen Ursprungstypen haben normale Stile, die in Schichten enthalten sind, den geringsten Vorrang. In unserem Beispiel haben die normalen Stile, die mit der ersten deklarierten Schicht (A) assoziiert sind, einen geringeren Vorrang als normale Stile in der zweiten deklarierten Schicht (B), die wiederum einen geringeren Vorrang als normale Stile in der dritten deklarierten Schicht (C) haben. Diese geschichteten Stile haben eine geringere Priorität als alle normalen ungeschichteten Stile, was normale Stile aus unlayeredStyles.css, moreUnlayeredStyles.css und die color von p im <style> selbst beinhaltet.
Wenn irgendwelche geschichteten Stile in A, B oder C Selektoren mit höherer Spezifität haben, die mit einem Element übereinstimmen, wie :root body p { color: black; }, spielt das keine Rolle. Diese Deklarationen werden aufgrund des Ursprungs 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 enthalten wäre, würde die höhere Spezifität beim Ursprungs- und Wichtigkeitsalgorithmus, das höhere Vorrang hätte, bedeuten, dass die spezifischere, schwarze Deklaration gewinnen würde.
Die Reihenfolge der Vorrangigkeit ist für Stile, die als !important deklariert sind, umgekehrt. Bedeutende Deklarationen, die außerhalb einer Kaskadenschicht getroffen werden, haben einen niedrigeren Vorrang als die innerhalb einer Schicht deklarierten. Bedeutende Deklarationen in der ersten Schicht (A) haben Vorrang vor bedeutenden Deklarationen in Schicht B, die Vorrang vor bedeutenden Deklarationen in Schicht C haben, welche Vorrang vor bedeutenden Deklarationen außerhalb einer Schicht haben.
Inline-Stile
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 einem :root body p-Selektorblock in einem der fünf importierten Stylesheets deklariert würde, wäre die Zeilenhöhe immer noch 1.6. Normale Inline-Stile haben keinen Vorrang vor animierten oder übergangenen Eigenschaften.
Bedeutende Inline-Stile haben Vorrang vor allen anderen Autorenstilen, unabhängig davon, ob sie bedeutend, inline oder geschichtet sind. Bedeutende Inline-Stile haben auch Vorrang vor animierten Eigenschaften, jedoch nicht vor übergangenen Eigenschaften. Drei Dinge können einen bedeutenden Inline-Stil überschreiben:
- Ein bedeutender Benutzerstil.
- Ein bedeutender Benutzeragentenstil.
- Eine übergangene Eigenschaft.
Wichtigkeit und Schichten
Die Prioritätsreihenfolge des Ursprungstyps wird für bedeutende Stile umgekehrt. Bedeutende Stile, die außerhalb einer Kaskadenschicht deklariert werden, haben einen niedrigeren Vorrang als solche, die Teil einer Schicht sind. Bedeutende Stile, die in frühen Schichten vorkommen, haben Vorrang vor bedeutenden Stilen, die in nachfolgenden Kaskadenschichten deklariert werden.
Betrachten Sie das folgende CSS:
p {
color: red;
}
@layer B {
:root p {
color: blue;
}
}
Selbst wenn das Rot zuerst deklariert wird und einen weniger spezifischen Selektor hat, weil ungeschichtetes CSS Vorrang vor geschichtetem CSS hat, wird das Absatz rot. Wenn wir einen Inline-Stil auf dem Absatz hätten, der ihn auf eine andere Farbe setzt, wie <p style="color: black">, wäre der Absatz schwarz.
Wenn wir !important zu diesem CSS-Bit hinzufügen, wird die Vorrangsreihenfolge innerhalb des Stylesheets umgekehrt:
p {
color: red !important;
}
@layer B {
:root p {
color: blue !important;
}
}
Jetzt wird der Absatz blau. Das !important in der frühest deklarierten Schicht hat Vorrang vor nachfolgenden Schichten und ungeschichteten wichtigen Deklarationen. Wenn der Inline-Stil !important enthalten würde, wie <p style="color: black !important">, wäre der Absatz wieder schwarz. Der bedeutende Inline-Stil hat Vorrang vor allen anderen vom Autor deklarierten !important-Deklarationen, unabhängig von ihrer Spezifität.
Hinweis:
Das !important-Flag kehrt die Vorrangsreihenfolge der Kaskadenschichten um. Aus diesem Grund sollten Sie nach Möglichkeit !important nicht verwenden, um externe Stile zu überschreiben. Stattdessen sollten Sie @import zusammen mit dem layer-Schlüsselwort oder der layer()-Funktion verwenden, um externe Stylesheets (aus Frameworks, Widget-Stylesheets, Bibliotheken usw.) in Schichten zu importieren. Importieren von Stylesheets in eine Schicht als erste Deklaration in Ihrem CSS senkt deren Vorrang, und vom Autor definierte Schichten, die später in Ihrem CSS definiert werden, haben höheren Vorrang. Das !important-Flag sollte nur sparsam verwendet werden, wenn überhaupt, um erforderliche Stile vor späteren Überschreibungen in der zuerst deklarierten Schicht zu schützen.
Stile, die sich übergängen, haben Vorrang vor allen wichtigen Stilen, unabhängig davon, wer sie deklariert oder wie sie deklariert werden.
Vollständige Kaskadenordnung
Jetzt, da wir ein besseres Verständnis für Ursprungstypen und Kaskadenschichtenvorrang haben, erkennen wir, dass die Tabelle in Kaskadenreihenfolge genauer durch die folgende Tabelle dargestellt werden könnte:
| Prioritätsreihenfolge (niedrig bis hoch) | Stilursprung | Wichtigkeit |
|---|---|---|
| 1 | Benutzeragent - erste deklarierte Schicht | normal |
| Benutzeragent - letzte deklarierte Schicht | ||
| Benutzeragent - ungeschichtete Stile | ||
| 2 | Benutzer - erste deklarierte Schicht | normal |
| Benutzer - letzte deklarierte Schicht | ||
| Benutzer - ungeschichtete Stile | ||
| 3 | Autor - erste deklarierte Schicht | normal |
| Autor - letzte deklarierte Schicht | ||
| Autor - ungeschichtete Stile | ||
Inline-style | ||
| 4 | Animationen | |
| 5 | Autor - ungeschichtete Stile | !important |
| Autor - letzte deklarierte Schicht | ||
| Autor - erste deklarierte Schicht | ||
Inline-style | ||
| 6 | Benutzer - ungeschichtete Stile | !important |
| Benutzer - letzte deklarierte Schicht | ||
| Benutzer - erste deklarierte Schicht | ||
| 7 | Benutzeragent - ungeschichtete Stile | !important |
| Benutzeragent - letzte deklarierte Schicht | ||
| Benutzeragent - erste deklarierte Schicht | ||
| 8 | Übergänge |
Welche CSS-Entitäten nehmen an der Kaskade teil
Nur CSS-Eigenschafts/Wert-Paar-Deklarationen nehmen an der Kaskade teil. CSS-At-Regel-Deskriptoren nehmen nicht an der Kaskade teil und HTML-Präsentationsattribute sind nicht Teil der Kaskade.
At-Regeln
CSS-At-Regeln, die Entitäten enthalten, die keine Deklarationen sind, wie eine @font-face-Regel, die Deskriptoren enthält, nehmen nicht an der Kaskade teil.
Zum größten Teil nehmen die in At-Regeln definierten Eigenschaften und Deskriptoren nicht an der Kaskade teil. Nur At-Regeln als Ganzes nehmen an der Kaskade teil. Beispielsweise werden innerhalb einer @font-face-Regel Schriftarten durch font-family-Deskriptoren identifiziert. Wenn mehrere @font-face-Regeln mit dem gleichen Deskriptor definiert sind, wird nur das passendste @font-face als Ganzes berücksichtigt. 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 bei At-Regeln).
Obwohl die in den meisten At-Regeln enthaltenen Deklarationen - wie beispielsweise in @media, @document oder @supports - an der Kaskade teilnehmen, kann die At-Regel einen gesamten Selektor irrelevant machen, wie wir es im einfachen Beispiel mit dem Druckstil gesehen haben.
Deklarationen in @keyframes nehmen nicht an der Kaskade teil. Wie bei @font-face wird nur das @keyframes als Ganzes durch den Kaskadenalgorithmus ausgewählt. Die Vorrangigkeit der Animation wird unten beschrieben.
In Bezug auf @import nimmt das @import selbst nicht an der Kaskade 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 eingefügt. Alle anderen mit @import importierten CSS werden als letzte deklarierte Schicht behandelt. Dies wurde oben bereits diskutiert.
Abschließend gehorcht @charset spezifischen Algorithmen und wird nicht durch den Kaskadenalgorithmus beeinflusst.
Präsentationsattribute
Präsentationsattribute sind Attribute im Quelldokument, die das Styling beeinflussen können. Zum Beispiel, wenn das veraltete align-Attribut enthalten ist, legt es die Ausrichtung auf mehrere HTML-Elemente fest, und das fill-Attribut definiert die Farbe, die zum Malen von SVG-Formen und -Text verwendet wird, und definiert den Endzustand für SVG-Animationen. 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 im Autoren-Stylesheet vor anderen Stilen mit einer Spezifität von 0 eingefügt.
Präsentationsattribute können nicht als !important deklariert werden.
CSS-Animationen und die Kaskade
CSS-Animationen, die @keyframes-Regel-At-Regeln verwenden, definieren Animationen zwischen Zuständen. @keyframes kaskadieren nicht, was bedeutet, dass zu jedem Zeitpunkt CSS Werte nur aus einem einzigen Satz von @keyframes übernimmt und niemals mehrere mischt. Wenn mehrere Sätze von @keyframes mit demselben Animationsnamen definiert sind, wird der zuletzt definierte Satz im Ursprung und der Schicht mit der größten Priorität verwendet. Andere @keyframes werden ignoriert, auch 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 Schlüsselbild-Animation, die in dem ungeschichteten CSS definiert ist, hat Vorrang vor den geschichteten Schlüsselbild-Animationsdeklarationen basierend auf Ursprung und Schichtvorhalt. In diesem Beispiel wird nur die Schriftgröße des Elements animiert.
Hinweis:
Es gibt keine wichtigen Animationen, da Eigenschaftsdeklarationen in einem @keyframes-Block, die !important als Teil des Wertes enthalten, ignoriert werden.
Zurücksetzen der Stile
Nachdem Ihr Inhalt die Stile geändert hat, kann es erforderlich sein, sie in einen bekannten Zustand zurückzusetzen. Dies kann in Fällen von Animationen, Themenänderungen und so weiter passieren. Die CSS-Eigenschaft all ermöglicht es Ihnen, schnell (fast) alles in CSS in einen bekannten Zustand zurückzusetzen.
all ermöglicht Ihnen, sofort alle Eigenschaften auf einen ihrer initialen (Standard-)Zustände zurückzusetzen, den Zustand, der von der vorherigen Ebene der Kaskade geerbt wurde, einem bestimmten Ursprung (das Benutzeragenten-Stylesheet, das Autoren-Stylesheet oder das Benutzer-Stylesheet) oder sogar die Werte der Eigenschaften vollständig zu löschen.
Spezifikationen
| Specification |
|---|
| CSS Cascading and Inheritance Level 4> |