CSS zurücksetzen und Stile löschen: revert / unset
Der Wert revert für eine Eigenschaft wie color setzt die Eigenschaft zurück auf ihren geerbten Wert, unset entfernt oder eliminiert einen Stil vollständig und setzt die Eigenschaft auf inherit.
CSS revert und unset
Beim Anpassen von Themes für WordPress oder andere CMS liegen die CSS-Dateien in ganzen Stapeln übereinander und für ein individuelles Themes werden Stile überschrieben.
revert und unset setzen Stile zurück auf die Standard-Browser-Darstellung (revert) oder nehmen einen Stil komplet weg.
h1.revertdemo {
color: green;
font-size:3em;
font-weight: 300;
}
H1: revert oder unset?
color:revert und color:unset haben dieselbe Wirkung: Die Browser setzen Schwarz als Standardfarbe bei Text. font-size:revert setzt die Schriftgröße auf den Standardwert der Browser, font-size:unset auf die Standard-Schriftgröße überhaupt: 1em.
p {
display: unset; // entfernt das vorgegebene display: block
}
revert ist eine relativ junge Eigenschaft, wird aber von allen immergrünen Browsern unterstützt;
Neben revert und unset gibt es noch die Werte inherit und initial, um CSS-Eigenschaften zurückzusetzen (CSS reset).
CSS Reset entfernt alle Standardstile des Browsers, um eine einheitliche Basis für alle Browser zu schaffen. CSS revert setzt eine CSS-Eigenschaft auf ihre vom Browser definierten Werte zurück.font-family wird in diesem Beispiel weder durch revert noch durch unset zurück auf die Default-Schrift (serif, meist Times) gesetzt, denn font-family ist hier in body deklariert. Darum wirkt revert nicht wie »keine Schrift«, sondern hebt nur diese Regel auf und nimmt den Wert aus der CSS-Kaskade.
body {
font-family: -apple-system, BlinkMacSystemFont, "Open Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
font-weight: 300;
background: var(--me-background);
line-height: 1.5;
font-size: 1rem;
}
Bei einem revert für font-weight hingegen wird das ursprüngliche Verhalten wieder aktiv: font-weight: 900 für Überschriften.
CSS all
all ist eine Abkürzung, mit der reset, unset, revert und inherit auf alle CSS-Eigenschaften gleichzeitig angewendet werden können. Ändert alle Eigenschaften, die dem Element oder seinem Elternelement zugewiesen wurden, zurück zum initialen Wert:
button {
all: initial;
}
Ein button bringt von Haus aus Stile wie padding, border, background usw. mit. Mit button { all: inerit } werden alle CSS-Eigenschaften vom Eltern-Element übernommen: font-family, color und background-color, margin, padding und border.
button { all: initial } setzt jede Eigenschaft zurück auf den Standardwert der CSS-Spezifikation: boder:none, background: transparent, padding: 0. Da bleibt nur der reine Text.
Die CSS-Eigenschaft all kann einen von fünf Werten annehmen: revert | initial | inherit | unset | revert-layer.
| Wert | Effekt auf das Element |
|---|---|
| initial | Setzt alle Eigenschaften auf Standardwerte der CSS-Spezifikation |
| unset | Vererbbare Eigenschaften → inherit, nicht-vererbbare → initial |
| revert | Springt zurück zur vorherigen Ursprungsquelle (User-Agent, User-Stylesheet, Autor-Stylesheet) |
| inherit | Alle Eigenschaften vom Eltern-Element übernehmen |
