CSS Reset – CSS Eigenschaften zurücksetzen

CSS-Regeln ergänzen sich, wenn wir einem Elemente an anderer Stelle eine weitere Eigenschaft hinzufügen. Obwohl – so ganz einfach ist die Ergänzung nicht immer, vor allem wird man sie nicht immer einfach wieder los.

18-12-15 SITEMAP

Reset für ein HTML-Element

Kann man einem HTML-Element tatsächlich alle Eigenschaften zurücksetzen? Diese Frage kommt auf, wenn das HTML-Element in einer anderen Umgebung eingesetzt wird, und sichergestellt werden soll, dass kein CSS aus einer anderen Quelle (z.B. aus einer anderen CSS-Datei) übernommen wird.

Wenn einem Element Eigenschaften an verschiedenen Stellen zugewiesen wurden, zeigt die Konsole des Browsers, welche Stile dem Element an welcher Stelle zugewiesen wurden und welche Regeln aktuell nicht mehr gelten.

Alles zurück an den Anfang
HTML
<h5 class="liberate" style="color:lavender">Alles zurück an den Anfang</h5>

Das Element wird aus drei Quellen mit CSS versorgt: aus einer CSS-Datei, aus dem style-Tag der HTML-Datei und aus einem CSS-Inlinestil. Die modernen Browser sind durchaus bereit, die Stile zurück auf den Standard für das jeweilige Element zu setzen, aber wir müssen die Kaskade berücksichtigen.


			

CSS inline-Stile zurücksetzen

Obwohl allgemein gilt, dass CSS-Stile aus einer CSS-Datei oder einem style-Tag Eigenschaften aus inline-Stilen nicht überschreiben können, gibt es am Ende auch hier einen Trick. Keinen besonders sauberen, nur um das mal auf den Tisch zu legen: !IMPORTANT ist nur der letzte Rettungsanker.

h5[style] {
color: black !IMPORTANT;
}

Normalize CSS oder CSS Reset

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

Fast immer wollen wir, dass alle Elemente in allen Browsern gleich aussehen. Das funktioniert nicht immer, denn die Browser haben ihre Eigenarten – allen voran IE10 und IE11.

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

Es gibt zwei Ansätze, die kleinen Unterschiede in der Browserdarstellung zu eliminieren: Normalize CSS und CSS Reset. Normalize CSS widmet sich nur den kleinen Abweichungen der Browser vom Standard. Ein Reset CSS hingegen ist invasiever und setzt alle vorgegebenen Stile außer Kraft.

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.

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.

IE10 ist schon lange passé, das Aus für den Support von IE11 hat Mikrosoft für den 30.11.2020 angesetzt. Damit kann das Zurücksetzen mittels Reset langsam ausklingen.