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).

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

Ändert alle Eigenschaften, die dem Element oder seinem Elternelement zugewiesen wurden, zurück zum initialen Wert:

body {
	all: initial;
}

Die CSS-Eigenschaft all kann einen von drei Werten annehmen: initial | inherit | unset.