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 März 2022.
Das revert-layer CSS-weite Schlüsselwort setzt den Wert einer Eigenschaft in einer Cascade-Layer auf den Wert der Eigenschaft in einer CSS-Regel zurück, die dem Element in einer vorherigen Cascade-Layer entspricht. Der Wert einer Eigenschaft mit diesem Schlüsselwort wird wie folgt neu berechnet, als ob keine Regeln für das Ziel-Element in der aktuellen Cascade-Layer angegeben wären.
Wenn es keine andere Cascade-Layer gibt, zu der für die entsprechende CSS-Regel zurückgekehrt werden kann, rollt der Eigenschaftswert auf den berechneten Wert zurück, der aus der aktuellen Schicht abgeleitet wird. Darüber hinaus, wenn es keine übereinstimmende CSS-Regel in der aktuellen Schicht gibt, rollt der Eigenschaftswert für das Element auf den Stil zurück, der in einem vorherigen Style-Ursprung definiert wurde.
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 erlaubt es Ihnen, Stile auf die in vorherigen Cascade-Layers innerhalb des Autor-Ursprungs spezifizierten zurückzusetzen. Das revert Schlüsselwort hingegen erlaubt es Ihnen, Stile, die im Autor-Ursprung angewendet wurden, auf die im Benutzer- oder Benutzer-Agent-Ursprung spezifizierten zurückzusetzen.
Das revert-layer Schlüsselwort ist idealerweise gedacht, um auf Eigenschaften innerhalb einer Cascade-Layer angewendet zu werden. Wenn es jedoch auf Eigenschaften außerhalb einer Cascade-Layer angewendet wird, setzt es Eigenschaftswerte auf die durch präsentationelle Hinweise (wie width und height Attribute oder das <s> Element in HTML) festgelegten Werte zurück, welche standardmäßig durch das Stylesheet des Benutzer-Agenten oder Benutzerstile festgelegt werden. Im Gegensatz zum revert Schlüsselwort, das präsentationelle Hinweise als Teil des Autor-Ursprungs betrachtet und sie ebenfalls zurücksetzt, ignoriert das revert-layer Schlüsselwort präsentationelle Hinweise außerhalb der Cascade-Layer und setzt sie daher nicht zurück.
Beispiele
Standardverhalten der Cascade-Layer
Im folgenden Beispiel sind zwei Cascade-Layers im CSS definiert, base und special. Standardmäßig überschreiben die Regeln in der special Layer konkurrierende Regeln in der base Layer, da special in der @layer Deklaration 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 Layer und sind rot. Dies ist das Standardverhalten der Cascade-Layer, bei dem Regeln in der special Layer Vorrang vor Regeln in der base Layer haben.
Rückkehr zum Stil in der vorherigen Cascade-Layer
Lassen Sie uns untersuchen, wie das revert-layer Schlüsselwort das Standardverhalten der Cascade-Layer ändert. In diesem Beispiel enthält die special Layer 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, rollt der color Eigenschaftswert auf den Wert in der entsprechenden feature Regel in der vorherigen Layer base zurück, und deshalb ist 'Item one' jetzt grün.
Rückkehr zum Stil im vorherigen Ursprung
Dieses Beispiel zeigt das Verhalten des revert-layer Schlüsselworts, wenn es keine Cascade-Layer gibt, zu der zurückgebracht werden kann, und es keine übereinstimmende CSS-Regel in der aktuellen Layer zur Vererbung des Eigenschaftswerts gibt.
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 Benutzer-Agent Ursprung zurückgesetzt.
Spezifikationen
| Specification |
|---|
| CSS Cascading and Inheritance Level 5 # revert-layer |
Browser-Kompatibilität
Loading…