Reset-Stylesheet

Ein Reset-Stylesheet (oder auch: CSS Reset) ist eine Sammlung von Stylesheet-Definitionen, die Formatierungen für HTML-Elemente vereinheitlichen oder zurücksetzen.

Problematik

Browser verwenden unterschiedliche Werte für Eigenschaften von HTML-Elementen, wenn diese Werte nicht vom Autor oder Benutzer definiert worden sind. So sind etwa die Farbe für Linktexte oder Abstandsdefinitionen bei vielen Browsern unterschiedlich definiert. Solche Voreinstellungen sind oft deutlich unterschiedlich, auch zwischen verschiedenen Versionen eines Browsers.^[1] Diese Unterschiede können, besonders in Kombination mit vom Autor oder Benutzer definierten Vorgaben, unvorhergesehene, oft negative, Auswirkungen auf das Erscheinungsbild einer Website haben.

Mit einem Stylesheet-Resets werden die Werte in verschiedenen Browsern vereinheitlicht. Die darauf aufbauenden, vom Entwickler eingesetzten Stilangaben werden im Idealfall dann von allen Browsern konsistent interpretiert.

Das Zurücksetzen der Stylesheet-Definitionen

Etwa 2004 wurden erste sogenannte Stylesheet-Resets veröffentlicht,^[2] welche sich auf das Zurücksetzen der Abstandsangaben beschränkten:

* {
    padding:0;
    margin:0;
}

Dieses Verfahren wurde von verschiedenen Entwicklern nach und nach verfeinert, so dass nur ausgewählte und sinnvolle Elemente auf grundlegende Angaben zurückgesetzt wurden.

Bekannte Stylesheet-Resets

• Ein bekanntes CSS-Reset ist Teil des Yahoo User Interface (YUI)^[3]
• Das CSS-Reset von Eric Meyer ist ebenfalls sehr bekannt^[4] und setzt nahezu jedes Element auf einen unformatierten Zustand^[5][6]

Nachteile

• Viele CSS-Resets entfernen jede Formatierung eines HTML-Elements. So hat beispielsweise selbst das strong-Element, welches hervorgehobenen bzw. fettgedruckten Text auszeichnet, in Form und Farbe oft keinen Unterschied mehr zum Rest des Textes. Der Entwickler muss sich also um jeden designrelevanten Parameter seines HTML-Codes kümmern.
• Je nach Umfang eines Resets entsteht eine höhere Ladezeit, da die bestehende Stylesheet-Datei entweder erweitert oder die Ressource zusätzlich geladen werden muss.
• Die Unterschiede zwischen einzelne Browser sind nur geringfügig und meistens nicht relevant für den Gesamteindruck. Eine Website soll flexibel dargestellt werden, wobei es nicht auf den Abstand einzelner Pixel ankommt. Es entsteht ein Mehraufwand für den Entwickler minimale Unterschiede zwischen Browsern zu beheben, wenn er einen CSS-Reset nutzt.^[7]

Weiterentwicklung

Um die Nachteile zu beheben, gibt es verschiedene Weiterentwicklungen des klassischen CSS-Resets:

Ein Ansatz ist CSS-Normalize. Dabei werden alle Eigenschaften einheitlich festgelegt, statt sie zurückzusetzen. Das Ziel ist es, dass alle Browser sich gleich verhalten, aber sinnvolle Voreinstellungen wie Listenpunkte oder fettgedruckter Text bei einem strong-Element beibehalten wird. Außerdem werden bekannte Bugs verschiedener Darstellungen von Browsern behoben.^[8][9]

Als Weiterentwicklung von CSS-Normalize ist CSS-Sanitize entstanden, um mehr den Anforderungen aktueller Projekte zu entsprechen. Dafür wird nicht auf die Kompatibilität veralteter Browser geachtet und die Regeln wurden verbessert. Viele Regeln sind subjektiv, allerdings gut begründet in der Stylesheet-Datei.^[10]

Am beliebtesten ist seit Februar 2020 CSS-Sanitize, was an der Anzahl der Downloads auf Npm deutlich wird.^[11]

Abgrenzung zum CSS-Framework

Ein CSS-Reset ist von einem CSS-Framework abzugrenzen. Ein Reset-Stylesheet hat lediglich die Aufgabe, Basisformatierungen zurückzusetzen. Im Gegensatz dazu versucht ein CSS-Framework, beispielsweise mithilfe vorgefertigter Stil-Definitionen für oft benötigte Elemente der Benutzeroberfläche oder einem Rastersystem den Entwicklungsprozess einer Website zu beschleunigen. Oftmals ist ein CSS-Reset jedoch Teil des CSS-Frameworks.

Weblinks

• Übersicht über verschiedene CSS-Resets (englisch)
• Reset CSS von Eric Meyer (englisch)
• Projektseite von CSS-Normalize der Entwickler Nicolas Gallagher und Jonathan Neal (englisch)
• Projektseite von CSS-Sanitize (englisch)