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

Einzelnachweise
  1. Browserkompatibilität: Probleme mit der Darstellung von Webseiten in verschiedenen Browsern | Tipps zur Web-Usability. Abgerufen am 12. Juni 2020.
  2. William Craig President of WebFX, Inc.: The History of CSS Resets. In: WebFX Blog. 2. Dezember 2010, abgerufen am 12. Juni 2020 (englisch).
  3. CSS Reset - YUI Library. Abgerufen am 12. Juni 2020.
  4. Poll Results: What CSS Reset Do You Use? 6. März 2008, abgerufen am 12. Juni 2020 (englisch).
  5. CSS-Reset: Rücksetzen der Browservorgaben. Abgerufen am 12. Juni 2020.
  6. CSS Tools: Reset CSS. Abgerufen am 12. Juni 2020 (englisch).
  7. Ellen: Tipps und Tricks zum CSS-Reset | Elmastudio. In: Elmastudio - Creative & Minimal WordPress Themes. 23. Februar 2011, abgerufen am 12. Juni 2020 (deutsch).
  8. Normalize.css - Was ist das? - Infos zur CSS Normalisierung. In: Webdesign Hannover - Saskia Lund. 13. Juni 2015, abgerufen am 12. Juni 2020 (deutsch).
  9. About normalize.css – Nicolas Gallagher. Abgerufen am 12. Juni 2020 (englisch).
  10. CSS-Basis durch Reset oder Normalisierung – normalize CSS | Adfreak. Abgerufen am 12. Juni 2020 (deutsch).
  11. NPM Trends: Compare NPM package downloads. Abgerufen am 12. Juni 2020 (englisch).
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.