CSS Reset – CSS Eigenschaften zurücksetzen

Die Idee des CSS-Resets stammt aus einer Ära, als die Browser mit sehr unterschiedlichen Grundeinstellungen voneinander abwichen. Ein CSS-Reset nimmt allen HTML-Elementen jeden Stil, so dass der Frontend-Entwickler buchstäblich jedes HTML-Element mit einem eigenen Stil untermalen muss.

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.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Reset 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 Hefebrot.

Der Support für IE10 ist schon 2016 beendet, das Aus für den Support von IE11 hat Microsoft für den 30.11.2020 angesetzt. Spätestens zu dieser Zeit war das Zurücksetzen mittels Reset überflüssig.

Im WordPress-Theme twentytwentyone sitzt jetzt normalize.css v8.0.1 aus dem Jahr 2018 (github.com/necolas/normalize.css */) anstelle des harten Resets und kümmert sich auch noch um IE10 und IE11.

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

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.