Was bewirkt „revert“ in CSS?

Miriam Suzanne erklärt in einem Mozilla Developer Video zu diesem Thema.

Der Wert revert in CSS „setzt“ eine Eigenschaft auf ihren vererbten Wert zurück, geht aber nur bis zur UA-Stylesheet zurück. Das ist entscheidend, da er z. B. kein <p> auf inline zurücksetzen würde, weil ein <p> laut UA-Stylesheet ein Block-Element ist.

Wenn wir also diesen HTML-Code hätten

<p>Lorem, ipsum dolor.</p>
<p class="alt">Fugit, id vel.</p>

Und CSS

p {
  color: red;
}
.alt {
  color: revert;
}

Beide Absätze würden vom p-Selektor ausgewählt und rot gefärbt werden, aber der Klassen-Selektor am zweiten Absatz hat eine höhere Spezifität, sodass color: revert; gewinnt und den Text zurück auf Schwarz (der UA-Standard) ändert.

Aber die Color-Eigenschaft wird weitergegeben, also wenn wir hätten

<div class="parent">
  <p>Lorem, ipsum dolor.</p>
  <p class="alt">Fugit, id vel.</p>
</div>

.parent {
  color: blue;
}
p {
  color: red;
}
.alt {
  color: revert;
}

Der zweite Absatz wäre blau, weil revert ihn zwingt, seine color aus der Vererbung zu übernehmen.

Der Wert revert ist ziemlich neu und wird in Firefox und Safari unterstützt, aber noch nicht in der Chrome-Welt. Wir haben bereits ein paar verwandte Schlüsselwörter, die für jede Eigenschaft funktionieren und dazu dienen, die Vererbung zu steuern und Werte zurückzusetzen.

Der Unterschied ist klein, aber wichtig: unset erlaubt Vererbung, während initial das nicht tut.

Miriam argumentiert, dass revert eigentlich das nützlichste von ihnen ist, weil es „Benutzer- und Benutzeragenten-Stile berücksichtigt“.

Ich stimme nicht zu. Aber (und ich hasse es, das zu sagen) ich denke, wir brauchen eine vierte Option, eine, die die erzwingende Kraft von initial hat, aber den Respekt vor dem UA-Stylesheet von revert. Etwas wie…

.button {
  all: default; /* Not real! */

  /* New styles starting from UA base */
}

Diese Schlüsselwörter funktionieren mit jeder Eigenschaft, aber ich denke, die Verwendung von all ist am überzeugendsten. Es ist eine Möglichkeit, alle Stile eines Elements zu löschen, um mit einer leeren Leinwand zu beginnen. Allerdings ist keiner der drei Optionen gut genug für diesen Anwendungsfall. Die Werte unset und revert sind nicht gut genug, da sie immer noch die Vererbung zulassen und daher Stile nicht gut genug löschen. Der Wert initial ist zu stark, da er Standardwerte löscht, die Sie vielleicht nicht erwarten, wie z. B. ein <div> von block auf inline zu setzen.