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.
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 ist 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 – 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>
Geerbte Eigenschaften
Geerbte Eigenschaften
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.
