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.

Definition

Ein CSS-Reset ist abzugrenzen von einem CSS-Framework. Ein Reset-Stylesheet hat lediglich die Aufgabe, Basisformatierungen zurückzusetzen, ohne dem Benutzer eine API bereitzustellen. Oftmals sind CSS-Resets Teile eines CSS-Frameworks.

Problematik

Jeder Browser hat unterschiedliche Standardeinstellungen für sämtliche HTML-Elemente. So ist etwa die Farbe für Linktexte im Internet Explorer 7 eine andere als die im Internet Explorer 8^[1]. Auch Abstandsdefinitionen oder Textformatierungen können sich je nach Browser unterschiedlich auswirken: Der Abstand eines Paragraph-Elements unterscheidet sich im Internet Explorer beispielsweise vom Mozilla Firefox. Wenn ein Entwickler nun für ein Element keine eigenen Styleangaben definiert hat, so benutzt der jeweilige Browser sein Basisstylesheet. Dies kann unvorhergesehene Auswirkungen auf das Gesamtlayout zur Folge haben, welche besonders bei pixelgenauen Designs weitreichende Folgen haben können.

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 von Yahoo! User Interface (YUI)^[3]
• Eric Meyers CSS Reset ist ebenfalls sehr bekannt und setzt nahezu jedes Element auf einen unformatierten Zustand^[4]

Vorteile

Mit der Hilfe eines Stylesheet-Resets haben Entwickler die volle Kontrolle über das Aussehen und die Positionierung der HTML-Elemente innerhalb des Markups. Im Idealfall sieht die erstellte Webseite in jedem Browser exakt identisch aus.

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.

Weblinks

• Übersicht über verschiedene CSS-Resets (englisch)

Einzelnachweise

1. ↑ http://www.iecss.com/
2. ↑ http://sixrevisions.com/css/the-history-of-css-resets/
3. ↑ http://yuilibrary.com/yui/docs/cssreset/
4. ↑ http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/