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 auf das Element in einer vorhergehenden Kaskadenschicht zutrifft. Der Wert einer Eigenschaft mit diesem Schlüsselwort wird neu berechnet, als ob keine Regeln für das Ziel-Element in der aktuellen Kaskadenschicht definiert wären.

Wenn es keine andere Kaskadenschicht gibt, auf die zurückgesetzt werden kann, wird der Eigenschaftswert auf den berechneten Wert basierend auf der aktuellen Schicht zurückgesetzt. Darüber hinaus, wenn es keine passende CSS-Regel in der aktuellen Schicht gibt, wird der Eigenschaftswert des Elements auf den Stil zurückgesetzt, der in einer vorhergehenden Stilherkunft definiert ist.

Dieses Schlüsselwort kann auf jede CSS-Eigenschaft angewendet werden, einschließlich der CSS-Kurzschreibeigenschaft all.

Revert-layer vs. revert

Das Schlüsselwort revert-layer erlaubt es, Stile auf diejenige zurückzusetzen, die in vorherigen Kaskadenschichten innerhalb der Autorherkunft definiert sind. Das revert-Schlüsselwort hingegen setzt Stile zurück, die in der Autorherkunft angewandt wurden, auf diejenigen, die in der Benutzerherkunft oder der Benutzeragent-Herkunft definiert sind.

Das Schlüsselwort revert-layer ist idealerweise dazu gedacht, auf Eigenschaften innerhalb einer Kaskadenschicht angewendet zu werden. Wenn es jedoch auf Eigenschaften außerhalb einer Kaskadenschicht angewendet wird, setzt es Eigenschaftswerte auf jegliche durch Präsentationshinweise gesetzte Werte zurück (wie width und height Attribute oder das <s> Element in HTML) und standardmäßig auf die Werte, die vom Benutzeragent-Stil definiert wurden. Im Gegensatz zum revert-Schlüsselwort, das Präsentationshinweise als Teil der Autorherkunft betrachtet und sie auch zurücksetzt, ignoriert das Schlüsselwort revert-layer Präsentationshinweise außerhalb der Kaskadenschicht und setzt diese daher nicht zurück.

Beispiele

Standardverhalten der Kaskadenschicht

Im folgenden Beispiel werden zwei Kaskadenschichten in der CSS definiert: base und special. Standardmäßig überschreiben Regeln in der special-Schicht konkurrierende Regeln in der base-Schicht, da special nach base in der @layer-Deklarationsanweisung aufgeführt ist.

HTML

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

css
@layer base, special;

@layer special {
  .item {
    color: red;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}

Ergebnis

Alle <li>-Elemente entsprechen der Regel item in der special-Schicht und sind rot. Dies ist das Standardverhalten der Kaskadenschicht, bei der Regeln in der special-Schicht Vorrang vor Regeln in der base-Schicht haben.

Zurücksetzen auf den Stil in einer vorherigen Kaskadenschicht

Untersuchen wir, wie das Schlüsselwort revert-layer das Standardverhalten der Kaskadenschicht verändert. In diesem Beispiel enthält die special-Schicht eine zusätzliche feature-Regel, die auf das erste <li>-Element abzielt. Die Eigenschaft color in dieser Regel ist auf revert-layer gesetzt.

HTML

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

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, wird der Wert der color-Eigenschaft auf den Wert in der entsprechenden Regel feature in der vorherigen Schicht base zurückgesetzt, und daher ist "Item one" jetzt grün.

Zurücksetzen auf den Stil in einer vorherigen Herkunft

Dieses Beispiel zeigt das Verhalten des Schlüsselworts revert-layer, wenn es keine Kaskadenschicht gibt, auf die zurückgesetzt werden kann, und wenn es keine passende CSS-Regel in der aktuellen Schicht gibt, um den Eigenschaftswert zu übernehmen.

HTML

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

css
@layer base {
  .item {
    color: revert-layer;
  }
}

Ergebnis

Der Stil für alle <li>-Elemente wird auf die Standardwerte in der Benutzeragent-Herkunft zurückgesetzt.

Spezifikationen

Specification
CSS Cascading and Inheritance Level 5
# revert-layer

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch