1. Web
  2. CSS
  3. Reference
  4. Values
  5. revert

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

revert CSS-Schlüsselwort

Baseline
Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.

Das revert-Schlüsselwort in CSS setzt den kaskadierten Wert der Eigenschaft von ihrem aktuellen Wert zurück auf den Wert, den die Eigenschaft gehabt hätte, wenn keine Veränderungen durch die aktuelle Stilorigin am aktuellen Element vorgenommen worden wären. Somit stellt es die Eigenschaft wahlweise auf den vom Benutzer-Agent festgelegten Wert, den vom Benutzer festgelegten Wert, den geerbten Wert (falls vererbbar) oder den initialen Wert zurück. Es kann auf jede CSS-Eigenschaft angewendet werden, einschließlich der CSS-Abkürzungseigenschaft all.

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

  • Wird revert in den eigenen Styles einer Website (der Autor-Origin) verwendet, rollt revert den kaskadierten Wert der Eigenschaft auf den benutzerdefinierten Stil zurück, falls ein solcher existiert; andernfalls wird der Stil auf den Standardstil des Benutzer-Agents zurückgesetzt.
  • Wird es in einem benutzerdefinierten Stylesheet des Benutzers verwendet oder wurde der Stil vom Benutzer angewendet (die Benutzer-Origin), rollt revert den kaskadierten Wert auf den Standardstil des Benutzer-Agents zurück.
  • Wird es innerhalb der Standardstile des Benutzer-Agents verwendet, 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 durch benutzerdefinierte Stylesheets erstellt vom Benutzer (auf der Browser-Seite eingestellt) Werte gesetzt haben.

Revert wird keine Auswirkungen auf Regeln haben, die auf Kinder eines Elements, das Sie zurücksetzen, angewendet wurden (es wird jedoch die Auswirkungen einer übergeordneten Regel auf ein Kind entfernen). Wenn Sie also eine color: green für alle sections haben und all: revert auf einer bestimmten Sektion, wird die Farbe der Sektion schwarz sein. Haben Sie jedoch eine Regel, um alle paragraphs rot zu machen, bleiben alle paragraphs in allen sections rot.

Hinweis: Revert ist nur ein Wert. Es ist immer noch 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 Initialwert benutzt, der für jede Eigenschaft individuell von den CSS-Spezifikationen definiert wurde. Im Gegensatz dazu setzen Benutzer-Agent-Stylesheets Standardwerte auf Basis von CSS-Selektoren.

Zum Beispiel ist der Initialwert für die display-Eigenschaft inline, während ein normales Benutzer-Agent-Stylesheet den Standardwert für <div>s auf block, für <table>s auf table usw. setzt.

Beispiele

Revert vs. unset

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

Im folgenden Beispiel setzen wir eine benutzerdefinierte font-weight, versuchen dann aber, sie inline im HTML-Dokument mit revert und unset zurückzusetzen. Das revert-Schlüsselwort wird den Text fett zurücksetzen, da dies der Standardwert für Header in den meisten Browsern ist. Das unset-Schlüsselwort wird den Text normal halten, da als eine vererbte Eigenschaft die font-weight dann ihren Wert vom body 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

Alles zurücksetzen

Alle Werte zurückzusetzen ist in einer Situation nützlich, in der Sie mehrere Stiländerungen vorgenommen haben und dann zu den Standardwerten des Browsers zurückkehren möchten. Im obigen Beispiel könnten Sie anstelle von 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