Vier CSS-Resets: CSS-Standardwerte der verschiedenen Webbrowser auf den gleichen Stand bringen

Viele Webentwickler beginnen ein neues Projekt mit dem Einbinden eines sogenannten CSS Resets. Darunter versteht man ein Stylesheet, was alle Browser-Layout-Standardeinstellungen auf einen gemeinsamen Nenner bringt. Viele basteln sich ihre eigenen Resets zusammen, aber diese Arbeit kann man sich auch sparen. Inzwischen existieren diverse vorgefertigte Resets, die man verwenden kann.

Das Grundproblem besteht darin, dass die verbreiteten Browser alle ein wenig unterschiedliche Vorstellungen davon haben, wie ein Element denn aussehen soll, solange es vom Entwickler nicht explizit per CSS beschrieben wurde. So können beispielsweise Listeneinrückungen oder Überschriften-Abstände von Browser zu Browser variieren. Da kann es leicht passieren, dass eine Webseite in einem anderen Browser plötzlich anders aussieht, weil man sich auf eine inkonsistente Standardeinstellung verlassen hat, ohne sie nochmals explizit festzulegen. CSS-Resets sollen einem diesen Abgleich von Inkonsistenzen ersparen, indem die Standardwerte der Browser mit einem neuen, meist sehr einfachen, Standardwert überschrieben werden. Auf dieser Grundlage aufbauend kann man dann seine eigene Gestaltung aufbauen und hat dabei dann hoffentlich weniger mit Inkonsistenzen zu kämpfen.

Der „Klassiker“ unter den CSS-Resets ist folgendes schlichtes Stylesheet, das sämtliche Außen- und Innenabstände auf Null setzt:

* {
margin: 0;
padding: 0;
}

Doch auch komplexere Varianten werden verwendet. Die Yahoo! Interface Library (YUI) bietet ein Reset-Stylesheet, das wesentlich weiter geht. Überschriften und Text erhalten die gleiche Größe und Schriftstärke. Nicht einmal strong-Elemente werden noch hervorgehoben. Auf einer Beispielseite kann man das vereinheitlichte Ergebnis bewundern. Als Entwickler wird man so gezwungen wirklich jedes Element bewusst zu gestalten, hat dafür aber eine konsistente Erscheinung über die verschiedenen Browser-Familien hinweg.

Ebenfalls verbreitet und ähnlich radikal ist das Reset CSS von Eric Meyer. Dieses ist nicht zum blinden übernehmen gedacht, sondern soll vom anwendenden Entwickler noch um Feinheiten wie die bevorzugte Hintergrundfarbe oder Ähnliches ergänzt werden. Dazu sind im Stylesheet diverse Kommentare platziert, die den Entwickler an die Anpassung erinnern sollen. In einer Variante wurde dieses Stylesheet auch schon zuvor bei Dr. Web ausführlich besprochen (siehe „CSS Neustart“ von Andreas Zwinkau).

Eine Art Zwischenstufe zwischen den extremeren Ansätzen und dem eingangs zitierten simplen Stylesheet bietet eine Variante von Ed Eliot, die nach eigener Aussage nur die Elemente betrifft, die er selbst am häufigsten zurücksetzen muss. Auch hier gibt es eine Beispielseite.

Wer die erwähnten Stylesheets nicht erst herunterladen bzw. kopieren möchte um sie auszuprobieren, kann sie auch direkt über css-reset.com einbinden. Diese Webseite hostet alle oben beschriebenen Stylesheets über Googles App Engine und verspricht dadurch hohe Verfügbarkeit und schnelle Zugriffszeiten:

Eric Meyers Stylesheet in 648 Bytes:
<link href="http://www.css-reset.com/css/meyer.css" media="screen, projection" rel="stylesheet" type="text/css" />
YUI Reset CSS in 483 Bytes:
<link href="http://www.css-reset.com/css/yui.css" media="screen, projection" rel="stylesheet" type="text/css" />
Ed Eliots Variante in 380 Bytes:
<link href="http://www.css-reset.com/css/ejeliot.css" media="screen, projection" rel="stylesheet" type="text/css" />
Das schlichte *-Reset in 23 Bytes:
<link href="http://www.css-reset.com/css/everything.css" media="screen, projection" rel="stylesheet" type="text/css" />

Yahoos YUI Reset CSS kann man auch direkt von den Yahoo Servern beziehen:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">.

Bei fertigen Projekten empfiehlt es sich allerdings, die Stylesheets selbst zu hosten. Jede von extern eingebundene Ressource stellt schließlich ein Ausfallrisiko dar, vor allem langfristig gesehen. Googles App Engine ist – Überraschung – ein Beta-Produkt. Auch ob css-reset.com überhaupt dauerhaft dort residieren wird, lässt sich nicht mit Sicherheit voraussagen. YUI ist schon etablierter, aber auch dort scheinen die Vorteile einer externen Einbindung nicht wirklich das Risiko zu rechtfertigen. Im Vergleich zu den zahllosen anderen Daten, die der eigene Webserver zuverlässig liefern muss, fällt eine weitere kleine CSS-Datei nun wirklich nicht ins Gewicht.