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 setzt den gekaskadierten Wert einer Eigenschaft von ihrem aktuellen Wert auf den Wert zurück, den die Eigenschaft gehabt hätte, wenn keine Änderungen durch den aktuellen Stilorigin am aktuellen Element vorgenommen worden wären. Es setzt die Eigenschaft somit entweder auf den vom Benutzeragenten gesetzten Wert, den vom Benutzer gesetzten Wert, den geerbten Wert (wenn vererbbar) oder den Anfangswert zurück. Es kann auf jede CSS-Eigenschaft angewendet werden, einschließlich der CSS-Kurzschreibeigenschaft all.

Dieses Schlüsselwort entfernt aus der Kaskade alle Stile, die überschrieben wurden, bis der Stil erreicht wird, zu dem zurückgerollt werden soll.

  • Wenn es in den Stilen einer Website (dem Autoren-Origin) verwendet wird, setzt revert den gekaskadierten Wert der Eigenschaft auf den benutzerdefinierten Stil des Benutzers zurück, falls vorhanden; andernfalls wird der Stil auf den Standardstil des Benutzeragenten zurückgesetzt.
  • Wenn es in einem benutzerdefinierten Stylesheet eines Benutzers oder in Stilen verwendet wird, die vom Benutzer angewendet wurden (der Benutzer-Origin), setzt revert den gekaskadierten Wert auf den Standardstil des Benutzeragenten zurück.
  • Wenn es innerhalb der Standardstile des Benutzeragenten verwendet wird, ist dieses Schlüsselwort funktional gleichwertig mit unset.

Das Schlüsselwort revert funktioniert in vielen Fällen genauso wie unset. Der einzige Unterschied besteht bei Eigenschaften, die von Browsern oder durch vom Benutzer erstellte benutzerdefinierte Stylesheets (auf der Browserseite festgelegt) gesetzt wurden.

Revert beeinflusst keine Regeln, die auf Kinder eines Elements angewendet werden, das zurückgesetzt wird (entfernt jedoch die Effekte einer übergeordneten Regel auf ein Kind). Wenn Sie also color: green für alle Sektionen und all: revert auf einer bestimmten Sektion haben, wird die Farbe der Sektion schwarz. Wenn Sie jedoch eine Regel haben, um alle Absätze rot zu machen, dann bleiben alle Absätze in allen Sektionen rot.

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

Hinweis: Das Schlüsselwort revert unterscheidet sich vom Schlüsselwort initial und sollte nicht damit verwechselt werden. Initial verwendet den Anfangswert, der für jede Eigenschaft von den CSS-Spezifikationen festgelegt ist. Im Gegensatz dazu setzen Benutzeragenten-Stylesheets Standardwerte basierend auf CSS-Selektoren.

Zum Beispiel ist der Anfangswert der display-Eigenschaft inline, während ein normales Benutzeragenten-Stylesheet den Standardwert von <div>s auf block, von <table>s auf table usw. setzt.

Beispiele

Revert vs. unset

Obwohl revert und unset ähnlich sind, gibt es Unterschiede bei bestimmten Eigenschaften für bestimmte Elemente.

Im folgenden Beispiel setzen wir einen benutzerdefinierten font-weight, versuchen dann jedoch, ihn inline im HTML-Dokument mit revert und unset zurückzusetzen. Das Schlüsselwort revert setzt den Text auf fett zurück, da dies der Standardwert für Überschriften in den meisten Browsern ist. Das Schlüsselwort unset hält den Text normal, da font-weight als vererbte Eigenschaft dann seinen Wert vom body übernehmen 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

Alles zurücksetzen

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. Im obigen Beispiel könnten Sie anstelle des separaten Zurücksetzens von font-weight und color einfach alle auf einmal mit dem Schlüsselwort revert auf all zurücksetzen.

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 übergeordneten Element

Das Zurücksetzen entfernt effektiv den Wert für das ausgewählte Element bei einer Regel und betrifft nur dieses Element. Um dies zu verdeutlichen, setzen wir eine grüne Farbe auf eine Sektion 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, dass der Absatz weiterhin rot ist, obwohl die color-Eigenschaft für die Sektion zurückgesetzt wurde. Außerdem sind sowohl der Header als auch der einfache Textknoten steelblue. Das Ergebnis des Zurücksetzens bewirkt, dass es so aussieht, als ob section { color: darkgreen; } für die Sektion, auf die color: revert angewandt wurde, nicht existieren würde.

Wenn weder der Benutzeragent noch der Benutzer die Farben von <h3> oder <section> überschreiben, wird die steelblue-Farbe von <main> geerbt, da die color-Eigenschaft vererbbar ist.

Spezifikationen

Specification
CSS Cascading and Inheritance Level 4
# default

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
revert

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch

  • Verwenden Sie das Schlüsselwort initial, um eine Eigenschaft auf ihren Anfangswert zu setzen.
  • Verwenden Sie das Schlüsselwort inherit, um die Eigenschaft eines Elements mit der seines übergeordneten Elements gleichzusetzen.
  • Verwenden Sie das Schlüsselwort revert-layer, um eine Eigenschaft auf den in einer vorhergehenden Kaskadenschicht festgelegten Wert zurückzusetzen.
  • Verwenden Sie das Schlüsselwort unset, um eine Eigenschaft entweder auf ihren vererbten Wert, falls sie vererbt wird, oder auf ihren Anfangswert, falls nicht, zu setzen.
  • Die Eigenschaft all ermöglicht es, alle Eigenschaften gleichzeitig auf ihren Initial-, Vererbten-, Zurückgesetzten- oder Unset-Zustand zurückzusetzen.