CSS-Schlüsselwort revert

Beispiele

Revert im Vergleich zu unset

Obwohl revert und unset ähnlich sind, unterscheiden sie sich bei manchen Eigenschaften bestimmter Elemente.

Im folgenden Beispiel legen wir einen benutzerdefinierten Wert für font-weight fest und versuchen dann, ihn im HTML-Dokument mit Inline-Stilen durch revert beziehungsweise unset zurückzusetzen. Das Schlüsselwort revert setzt den Text auf Fettschrift zurück, da dies in den meisten Browsern der Standardwert für Überschriften ist. Das Schlüsselwort unset belässt den Text dagegen in normaler Schriftstärke: Da font-weight eine vererbte Eigenschaft ist, erbt sie in diesem Fall ihren Wert vom body-Element.

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

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

Ergebnis

Alle Eigenschaften zurücksetzen

Alle Werte zurückzusetzen ist nützlich, wenn Sie mehrere Stiländerungen vorgenommen haben und anschließend zu den Standardwerten des Browsers zurückkehren möchten. Im obigen Beispiel könnten Sie also font-weight und color nicht einzeln, sondern gleichzeitig zurücksetzen, indem Sie der Eigenschaft all den Wert revert zuweisen.

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

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

Ergebnis

Revert auf einem Elternelement

Durch das Zurücksetzen wird der Wert für das Element, das Sie mit einer Regel auswählen, praktisch entfernt. Dies geschieht nur für dieses Element. Zur Veranschaulichung legen wir für eine Section die Farbe Grün und für einen Absatz die Farbe Rot fest.

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

main {
  border: 3px solid steelblue;
}

section {
  margin: 0.5rem;
  border: 2px dashed darkgreen;
}

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

Ergebnis

Beachten Sie, dass der Absatz weiterhin rot ist, obwohl eine color-Eigenschaft für die Section zurückgesetzt wurde. Beachten Sie außerdem, dass sowohl die Überschrift als auch der einfache Textknoten steelblue sind. Durch das Zurücksetzen ist das Ergebnis für die Section mit color: revert so, als gäbe es section { color: darkgreen; } nicht.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwenden Sie das Schlüsselwort initial, um eine Eigenschaft auf ihren Anfangswert zu setzen.
• Verwenden Sie das Schlüsselwort inherit, damit eine Eigenschaft eines Elements denselben Wert wie beim Elternelement erhält.
• Verwenden Sie das Schlüsselwort revert-layer, um eine Eigenschaft auf den in einer vorherigen Kaskadenebene festgelegten Wert zurückzusetzen.
• Verwenden Sie das Schlüsselwort revert-rule, um eine Eigenschaft auf den Wert einer früheren passenden Stilregel zurückzusetzen.
• Verwenden Sie das Schlüsselwort unset, um eine Eigenschaft auf ihren geerbten Wert zu setzen, falls sie vererbbar ist, andernfalls auf ihren Anfangswert.
• Mit der Eigenschaft all können Sie alle Eigenschaften gleichzeitig auf ihren Anfangswert, geerbten Wert oder einen durch revert beziehungsweise unset bestimmten Wert zurücksetzen.