CSS Reset – CSS-Eigenschaften zurücksetzen

Reset CSS

Die HTML-Elemente unterliegen gerade in Content Management Systemen wie WordPress oder Drupal nicht nur einer CSS-Datei, sondern ganzen Ebenen von Stylesheets, allen voran den Voreinstellungen des Browsers.

Ein CSS-Reset wendet sich in erster Linie den Einstellungen des Browsers zu und soll Differenzen zwischen den Browsern verschiedener Herstellen, aber auch zwischen den Browser-Versionen egalisieren. Die jüngere Variante des Resets wird als Normalize CSS bezeichnet und geht differenzierter vor. Viele Templates – seien sie für WordPress, Drupal oder andere CMS bestimmt – beginnen auch heute noch mit Normalize CSS.

Ein Beispiel für ein Reset ist die CSS-Datei für das WordPress Theme twentytwenty.

html,
body {
	border: none;
	margin: 0;
	padding: 0;
}

h1,
…
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

Mit einem hartem Reset – alles auf kein Stil – müssen alle Stile nach dem Zurücksetzen in Eigenarbeit hervorgeholt werden. CSS-Dateien, die mit einem harten Reset anfangen, gehen auf wie ein Hefeteig.

Das Aus für den Support von IE11 war im November 2020. Spätestens zu dieser Zeit wurde das Zurücksetzen mittels Reset überflüssig.

Im WordPress-Theme twentytwentyone setzte noch auf normalize.css v8.0.1 aus dem Jahr 2018 anstelle des harten Resets und kümmerte sich auch noch um IE10 und IE11. Das aktuelle WordPress-Standardtheme Twenty Twenty-Five wurde als »Block-Theme« konzipiert, um den Einsatz von CSS auf ein Minimum zu reduzieren. Ein Reset oder Normalize wird nicht mehr gebraucht.

Normalize CSS oder CSS Reset?

Neben dem Zurücksetzen des CSS einzelner Elemente setzen viele CSS-Dateien auf die Normalisierung, um einen standadisierten Anlauf für das eigene CSS auf den Weg zu bringen.

Wenn der Browser die Seite anzeigt, setzt er standardisierte Stile ein – HTML: Formatierung ohne CSS. So zeigen sich z.B. die Überschriften h1 bis h6 in anderen Größen als der einfache Text in p-Tags: größer und fett und mit anderen Abständen (margin). Darum müssen wir uns heute keine Gedanken machen. Die modernen Browser halten sich eng an die Standards.

Normalize CSS widmet sich nur den kleinen Abweichungen der Browser vom Standard.

Normalize CSS

Die Konsole der Browser zeigt die "angeborenen" Stile der Browser als User Agent Stylesheet.

h1 {
	display: block;
	font-size: 2em;
	margin-block-start: 0.67em;
	margin-block-end: 0.67em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}

Es gibt keinen Browser-Selektor in CSS. Also werden die Browser dort, wo sie aus der Linie tanzen, auf den Standard gesetzt.

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

Die Normalisierung braucht ein hohes Maß an Erfahrung: Bei welchen Elementen weichen Browser von der Norm ab? Da sucht man sich vorsichtshalber ein breit anerkanntes Normalize CSS.

Initial, Inherit, Unset, Revert

initial ist der Wert, der einem Element schon durch die CSS-Spezifikation zugewiesen wurde.

.wrapper {
	border: 1px solid magenta;
}

.blueBold {
	color: blue;
	font-weight: bold;
	font-size: 1.5em;
}

p.refuse {
	color:initial;
	font-size: initial;
	font-weight: initial;
	border: inherit;
}

…

<div class="blueBold">
	<div class="wrapper">
		<p>Geerbte Eigenschaften</p>
		<p class="refuse">Geerbte Eigenschaften</p>
	</div>
</div>

Das erste p-Element erbt color, font-size und font-weight von seinem Elternelement blueBold. Das zweite p lehnt diese Erbe ab, aber übernimmt die Eigenschaft border von seinem Elternelement wrapper.

inherit ist der Wert einer CSS-Eigenschaft, der vom Elternelement auf dieses Element vererbt wurde.

CSS revert / unset

Erst in jüngster Zeit sind zwei weitere Werte hinzugekommen: revert und unset.

• revert übernimmt den Wert, den der Browser als Standard setzt, wenn dem Element keine CSS-Eigenschaften zugewiesen wurden.
• unset setzt alle Werte zurück auf den Standard, im Grunde genommen eine Kombination aus initial und inherit.

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.

Bootstrap CSS – reboot.css

Bootstrap CSS ist ein gewaltstarkes CSS-Framework, auf dem viele Templates aufbauen. Bootstrap 5.0 bietet ein reboot CSS, das stark an normalize.css angelehnt ist, aber ein paar Extras bietet.

So geht reboot.css über normalize.css mit box-sizing: border-box hinaus und eliminiert margin-top auf allen Elementen (h1,…, h6, p, ul, ol, dl, pre).

Auch wer weder normalize.css noch reboot.css einsetzt, gewinnt bei einem Blick auf die Dokumentation wertvolle Erkenntnisse.