revert

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Das revert CSS-Schlüsselwort kehrt den kaskadierten Wert einer Eigenschaft von ihrem aktuellen Wert auf den Wert zurück, den die Eigenschaft gehabt hätte, wenn keine Änderungen durch den aktuellen Style Origin am aktuellen Element vorgenommen worden wären. Somit wird die Eigenschaft entweder auf den vom Benutzeragenten gesetzten Wert, den vom Benutzer festgelegten Wert, auf ihren geerbten Wert (falls sie vererbbar ist) oder auf den Anfangswert zurückgesetzt. Es kann auf jede CSS-Eigenschaft angewendet werden, einschließlich der CSS-Kurzschlusseigenschaft all.

Dieses Schlüsselwort entfernt aus der Kaskade alle überschriebenen Stile, bis der Stil erreicht ist, zu dem zurückgegangen wird.

  • Wenn es von den eigenen Stilen einer Seite (dem Autor-Origin) verwendet wird, rollt revert den kaskadierten Wert der Eigenschaft auf den benutzerdefinierten Stil zurück, falls einer existiert; andernfalls wird der Stil auf den Standardstil des Benutzeragenten zurückgesetzt.
  • Wenn es in einem benutzerdefinierten Stylesheet eines Benutzers verwendet wird oder wenn der Stil vom Benutzer angewendet wurde (dem Benutzer-Origin), rollt revert den kaskadierten Wert auf den Standardstil des Benutzeragenten zurück.
  • Wenn es innerhalb der Standardstile des Benutzeragenten verwendet wird, ist dieses Schlüsselwort funktional äquivalent zu unset.

Das revert Schlüsselwort funktioniert in vielen Fällen genau wie unset. Der einzige Unterschied besteht bei Eigenschaften, die vom Browser oder von benutzerdefinierten Stylesheets (auf Browserseite) gesetzt werden.

Revert wird Regeln, die auf Kinder eines Elements angewendet werden, das Sie zurücksetzen, nicht beeinflussen (entfernt jedoch die Effekte einer Elternregel auf ein Kind). Wenn Sie also eine Regel color: green für alle Abschnitte und all: revert auf einem bestimmten Abschnitt haben, wird die Farbe des Abschnitts schwarz. Aber wenn Sie eine Regel haben, die alle Absätze rot macht, bleiben alle Absätze in allen Abschnitten rot.

Hinweis: Revert ist nur ein Wert. Es ist weiterhin möglich, den revert-Wert mit Spezifität zu überschreiben.

Hinweis: Das revert-Schlüsselwort ist anders als und sollte nicht mit dem initial-Schlüsselwort verwechselt werden, das den Anfangswert verwendet, der für jede Eigenschaft in den CSS-Spezifikationen definiert ist. Im Gegensatz dazu setzen Benutzeragent-Stylesheets Standardwerte auf Basis von CSS-Selektoren.

Zum Beispiel ist der Anfangswert für die display-Eigenschaft inline, während ein normales Benutzeragent-Stylesheet den Standard-display-Wert von <div>s auf block, von <table>s zu table usw. setzt.

Beispiele

Revert vs. unset

Obwohl revert und unset ähnlich sind, unterscheiden sie sich für einige Eigenschaften bei einigen Elementen.

Im folgenden Beispiel setzen wir benutzerdefinierte font-weight, versuchen dann aber, es im HTML-Dokument inline mit revert und unset zurückzusetzen. Das revert-Schlüsselwort wird den Text in Fett zurücksetzen, weil das in den meisten Browsern der Standardwert für Überschriften ist. Das unset-Schlüsselwort wird den Text normal halten, da die font-weight-Eigenschaft als vererbte Eigenschaft ihren Wert dann vom Körper erben würde.

HTML

html
<h3 style="font-weight: revert; color: revert;">
  This should have its original font-weight (bold) and color: black
</h3>
<p>Just some text</p>
<h3 style="font-weight: unset; color: unset;">
  This will still have font-weight: normal, but color: black
</h3>
<p>Just some text</p>

CSS

css
h3 {
  font-weight: normal;
  color: blue;
}

Ergebnis

Revert alle

Das Zurücksetzen aller Werte ist nützlich, wenn Sie mehrere Stiländerungen vorgenommen haben und dann zu den Standardwerten des Browsers zurückkehren möchten. In dem obigen Beispiel könnten Sie statt font-weight und color separat zurückzusetzen einfach alle auf einmal zurücksetzen - indem Sie das revert-Schlüsselwort auf all anwenden.

HTML

html
<h3>This will have custom styles</h3>
<p>Just some text</p>
<h3 style="all: revert">This should be reverted to browser/user defaults.</h3>
<p>Just some text</p>

CSS

css
h3 {
  font-weight: normal;
  color: blue;
  border-bottom: 1px solid grey;
}

Ergebnis

Revert auf einem Elternteil

Das Zurücksetzen entfernt effektiv den Wert für das Element, das Sie mit einer Regel auswählen, und das passiert nur für dieses Element. Um dies zu veranschaulichen, setzen wir eine grüne Farbe auf einen Abschnitt und eine rote Farbe auf einen Absatz.

HTML

html
<main>
  <section>
    <h3>This h3 will be dark green</h3>
    <p>Text in paragraph will be red.</p>
    This stray text will also be dark green.
  </section>
  <section class="with-revert">
    <h3>This h3 will be steelblue</h3>
    <p>Text in paragraph will be red.</p>
    This stray text will also be steelblue.
  </section>
</main>

CSS

css
main {
  color: steelblue;
}
section {
  color: darkgreen;
}
p {
  color: red;
}
section.with-revert {
  color: revert;
}

Ergebnis

Beachten Sie, wie der Absatz immer noch rot ist, obwohl eine color-Eigenschaft für den Abschnitt zurückgesetzt wurde. Beachten Sie auch, dass sowohl der Header als auch der einfache Textknoten steelblue sind. Das Ergebnis des Zurücksetzens macht es so, als gäbe es section { color: darkgreen; } nicht für den Abschnitt mit color: revert angewendet.

Auch wenn weder der Benutzeragent noch der Benutzer die <h3> oder <section> Farbwerte überschreiben, wird die steelblue-Farbe von <main> geerbt, da die color-Eigenschaft eine vererbte Eigenschaft ist.

Spezifikationen

Specification
CSS Cascading and Inheritance Level 4
# default

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

  • Verwenden Sie das initial-Schlüsselwort, um eine Eigenschaft auf ihren Anfangswert zu setzen.
  • Verwenden Sie das inherit-Schlüsselwort, um die Eigenschaft eines Elements mit der seines Elternteils gleichzusetzen.
  • Verwenden Sie das revert-layer-Schlüsselwort, um eine Eigenschaft auf den Wert zurückzusetzen, der in einer vorherigen Kaskadenschicht festgelegt wurde.
  • Verwenden Sie das unset-Schlüsselwort, um eine Eigenschaft auf ihren geerbten Wert zu setzen, wenn sie vererbt wird, oder auf ihren Anfangswert, wenn nicht.
  • Die all-Eigenschaft ermöglicht es, alle Eigenschaften gleichzeitig auf ihren ursprünglichen, geerbten, zurückgesetzten oder nicht festgelegten Zustand zurückzusetzen.