revert-layer
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
Das revert-layer
CSS-weite Schlüsselwort setzt den Wert einer Eigenschaft in einer Kaskadenschicht auf den Wert der Eigenschaft in einer CSS-Regel zurück, die dem Element in einer vorherigen Kaskadenschicht entspricht. Der Wert einer Eigenschaft mit diesem Schlüsselwort wird so neu berechnet, als ob keine Regeln für das Ziel-Element in der aktuellen Kaskadenschicht angegeben wären.
Wenn es keine andere Kaskadenschicht gibt, zu der für die entsprechende CSS-Regel zurückgegangen werden kann, wird der Eigenschaftswert auf den berechneten Wert zurückgesetzt, der aus der aktuellen Schicht abgeleitet wird. Wenn es außerdem keine entsprechende CSS-Regel in der aktuellen Schicht gibt, wird der Eigenschaftswert für das Element auf den in einem vorherigen Stil-Ursprung definierten Stil zurückgesetzt.
Dieses Schlüsselwort kann auf jede CSS-Eigenschaft angewendet werden, einschließlich der CSS-Kurzschreibweise all
.
Revert-layer vs. revert
Das revert-layer
Schlüsselwort ermöglicht es Ihnen, Stile auf diejenigen zurückzusetzen, die in vorherigen Kaskadenschichten innerhalb des Autorenursprungs angegeben sind. Das revert
Schlüsselwort hingegen ermöglicht es, Stile, die im Autorenursprung angewendet wurden, auf diejenigen im Nutzerursprung oder Nutzeragentursprung zurückzusetzen.
Das revert-layer
Schlüsselwort soll idealerweise auf Eigenschaften innerhalb einer Kaskadenschicht angewendet werden. Wird es jedoch auf Eigenschaften außerhalb einer Kaskadenschicht angewendet, setzt es Eigenschaftswerte auf irgendwelche Werte zurück, die durch präsentationale Hinweise (wie width
und height
Attribute oder das <s>
Element in HTML) gesetzt werden, wobei die Standardwerte des Stylesheets des Benutzeragenten oder der Benutzerstile verwendet werden. Im Gegensatz zum revert
Schlüsselwort, das präsentationale Hinweise als Teil des Autorenursprungs betrachtet und sie ebenfalls zurücksetzt, ignoriert das revert-layer
Schlüsselwort präsentationale Hinweise außerhalb der Kaskadenschicht, sodass es diese nicht zurücksetzt.
Beispiele
Standardverhalten der Kaskadenschicht
Im folgenden Beispiel sind zwei Kaskadenschichten in der CSS definiert, base
und special
. Standardmäßig überschreiben Regeln in der special
Schicht konkurrierende Regeln in der base
Schicht, weil special
in der @layer
Deklarationsanweisung nach base
aufgeführt ist.
HTML
<p>This example contains a list.</p>
<ul>
<li class="item feature">Item one</li>
<li class="item">Item two</li>
<li class="item">Item three</li>
</ul>
CSS
@layer base, special;
@layer special {
.item {
color: red;
}
}
@layer base {
.item {
color: blue;
}
.feature {
color: green;
}
}
Ergebnis
Alle <li>
Elemente entsprechen der item
Regel in der special
Schicht und sind rot. Dies ist das Standardverhalten der Kaskadenschicht, bei dem Regeln in der special
Schicht Vorrang vor Regeln in der base
Schicht haben.
Zurücksetzen auf Stil in vorheriger Kaskadenschicht
Untersuchen wir, wie das revert-layer
Schlüsselwort das Standardverhalten der Kaskadenschicht ändert. In diesem Beispiel enthält die special
Schicht eine zusätzliche feature
Regel, die auf das erste <li>
Element abzielt. Die color
Eigenschaft in dieser Regel ist auf revert-layer
gesetzt.
HTML
<p>This example contains a list.</p>
<ul>
<li class="item feature">Item one</li>
<li class="item">Item two</li>
<li class="item">Item three</li>
</ul>
CSS
@layer base, special;
@layer special {
.item {
color: red;
}
.feature {
color: revert-layer;
}
}
@layer base {
.item {
color: blue;
}
.feature {
color: green;
}
}
Ergebnis
Mit color
auf revert-layer
gesetzt, geht der color
Eigenschaftswert auf den Wert in der entsprechenden feature
Regel in der vorherigen Schicht base
zurück, und somit ist 'Item one' jetzt grün.
Zurücksetzen auf Stil in vorherigem Ursprung
Dieses Beispiel zeigt das Verhalten des revert-layer
Schlüsselworts, wenn es keine Kaskadenschicht gibt, auf die zurückgegangen werden kann, und es keine entsprechende CSS-Regel in der aktuellen Schicht gibt, um den Eigenschaftswert zu erben.
HTML
<p>This example contains a list.</p>
<ul>
<li class="item feature">Item one</li>
<li class="item">Item two</li>
<li class="item">Item three</li>
</ul>
CSS
@layer base {
.item {
color: revert-layer;
}
}
Ergebnis
Der Stil für alle <li>
Elemente wird auf die Standardwerte im Nutzeragentursprung zurückgesetzt.
Spezifikationen
Specification |
---|
CSS Cascading and Inheritance Level 5 # revert-layer |
Browser-Kompatibilität
BCD tables only load in the browser