Eine kurze Geschichte der »CSS Resets«

Dieser Beitrag stellt einige klassische CSS-Resets vor, die jeder CSS-Autor kennen sollte. Anschließend beantwortet ein Tweet die Frage, ob man so etwas heute noch braucht. Kurze Antwort: Nicht unbedingt.


Der erste CSS-Reset: * { padding:0; margin:0; }

Alle Browser haben ein eingebautes Stylesheet, und eine ziemlich nervige Sache beim Lernen von CSS war es lange Zeit, dass die Browser in ihren Stylesheets zum Teil sehr unterschiedliche Standardvorgaben hatten.

Um nicht jedes Mal wieder auf Fehlersuche gehen zu müssen, wurde ab etwa 2004 eine Maßnahme populär, die auf den ersten Blick radikal erscheinen mag, die sich aber auf breiter Front durchgesetzt hat:

* { padding: 0; margin: 0; }

Viele Webdesigner begannen ihr Stylesheet mit dieser CSS-Regel, die die Innen- und Außenabstände für alle HTML-Elemente auf 0 setzt.

»Betrachten Sie es als Kalibrierung« hieß es dazu im Original-Little Boxes von 2006, denn durch diese eine Regel wurde in allen Browsern eine einheitliche Ausgangssituation geschaffen.

Danach musste man zwar in seinem eigenen CSS alle gewünschten Abstände neu definieren, aber man hatte zumindest in alle Browsern eine ähnliche Grundlage.


Der Klassiker: »reset.css«

Die Sache mit dem CSS-Reset wurde immer beliebter, und 2007 veröffentlichte Erik Meyer seine ausführlichen »Reset Styles«, die zu einem echten Klassiker wurden:

Der klassische CSS-Reset von Erik Meyer.
Der klassische CSS-Reset von Erik Meyer

Meyer geht in seinem Reset etwas zielgerichteter vor und listet z. B. alle Selektoren einzeln. Außerdem werden neben padding und margin auch die Rahmenlinien (border) entfernt und eine grundlegende Schriftgestaltung definiert.


Ein etwas anderer Ansatz: »normalize.css«

CSS-Resets sind in der Regel recht radikal und überschreiben fast alle Browservorgaben, was nach dem Motto »Entfernt die Zähne samt Belag« manchmal auch über das Ziel hinausschießt und mehr Arbeit verursacht als es einspart.

Als Alternative zu einem harten Reset hat sich daher eine Normalisierung etabliert, also ein eher weiches Angleichen der unterschiedlichen Browservorgaben, und das bekannteste Projekt dieser Art ist normalize.css.

normalize.css von Nicolas Gallagher

Initiator Nicolas Gallagher beschreibt die Ziele seines Projektes wie folgt:

  • sinnvolle CSS-Browservorgaben erhalten und nicht überschreiben
  • Angleichung der Gestaltung im Browser für HTML-Elemente
  • Korrektur von bekannten Browserbugs und -inkonsistenzen
  • Verbesserung der Usability durch subtile Verbesserungen
  • Erklärung des Codes durch Kommentare und Dokumentation

normalize.css wurde in Websites wie Twitter und GitHub und Projekten wie HTML5 Boilerplate und Bootstrap genutzt, und wurde auch in »Flexible Boxes« (ab 2013) vorgestellt.


Übersicht: traditionelle CSS-Resets auf einen Blick

Im Laufe der Jahre gab es immer wieder neue Reset-Varianten, und Chris Coyier macht in seinem »HTML5 Kitchen Sink« die Auswirkungen unterschiedlicher Resets per Klick sichtbar.

Der HTML5-Kitchen-Sink von Chris Coyier
Die Auswirkungen verschiedener Reset auf einen Blick

Interessant: Ein moderner CSS-Reset

Lange Zeit hörte man eigentlich immer weniger von CSS-Resets, aber im Oktober 2019 veröffentlichte der immer lesenswerte Andy Bell (aka @hankchizljaw) einen Blogbeitrag namens A Modern CSS Reset.

Ein moderner CSS-Reset von Andy Bell

In seiner Einleitung schreibt er, dass man die traditionellen Resets heutzutage wohl nicht mehr braucht:

In this modern era of web development, we don’t really need a heavy-handed reset, or even a reset at all, because CSS browser compatibility issues are much less likely than they were in the old IE 6 days.

Andy Bell spart sich selbst bei neuen Projekten aber etwas Arbeit, in dem er ein paar grundlegende Einstellungen wie das Border-Box-Modell oder die Entfernung von margin für bestimmte Elemente vorab definiert. Eine Besonderheit in seinem modernen Reset ist das Styling für Listen, das zusammengefasst etwa so aussieht:

ul[class], ol[class] { list-style: none; padding: none; margin: none; }

Aufzählungszeichen sowie Innen- und Außenabstand werden auf none gesetzt, aber nur für Listen mit dem Attribut class. Das ist z. B. häufig in der Navigation der Fall. Im Fließtext verwendete normale Listen ohne Klasse sind von diesem Reset nicht betroffen.

Auf der Suche nach sinnvollen Standardeinstellungen für eigene Projekte ist der moderne CSS-Reset von Andy Bell auf jeden Fall einen Besuch wert.


Fazit: Braucht man einen CSS-Reset?

CSS-Resets stammen aus einer Zeit, in der der Internet Explorer noch ein wichtiger Browser war. Das ist definitiv für immer vorbei (YES!), und die Vielzahl der heutigen Browser basiert, wie im ersten Kapitel von »Einstieg in HTML und CSS« erwähnt, auf letztlich wenigen Rendering Engines wie Blink, Webkit oder Quantum.

Braucht man dann heute überhaupt noch einen CSS-Reset?

Webdesigner Andy Clarke blickt in einem Tweet vom Oktober 2019 zurück auf die letzten drei Jahre, in denen er keinen Reset mehr eingesetzt hat:

Fazit: Nicht unbedingt.

Vielleicht ist es sinnvoll, für seine Projekte ein paar häufig benötigte Standardeinstellungen zu definieren, aber traditionelle Resets verursachen in den meisten Fällen wohl mehr Arbeit als sie ersparen. Auch in »Einstieg in HTML und CSS« wird kein Reset mehr eingesetzt.


Schreiben Sie einen Kommentar