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

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 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

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, 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

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 im Nutzeragentursprung zurückgesetzt.

Spezifikationen

Specification
CSS Cascading and Inheritance Level 5
# revert-layer

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch