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.
0 Antworten zu „Vier CSS-Resets: CSS-Standardwerte der verschiedenen Webbrowser auf den gleichen Stand bringen“
— was ist Deine Meinung?
Auch wenn hier viele User die Einbindung externer Stylesheets und JavaScript-Dateien für gewagt oder gar kritisch halten, bietet diese doch klare Vorteile: Externe Links/Dateien (wie zum Beispiel Google jQuery oder auch YUI) werden bei den meisten Besuchern aus dem Cache geladen, da hunderte oder gar tausende Seiten diese Dateien verwenden. Zusätzlich wird durch den Verweis auf eine anderen Domain die Anzahl der möglichen parallelen Downloads erhöht.
Letztendlich sollten Sie selbst entscheiden, ob Sie der Verfügbarkeit der Google- und Yahoo-Server im Gegensatz zu Ihrem eigenen Hoster vertrauen. Wer es ganz genau machen möchte, kann die Verfügbarkeit der Dateien serverseitig prüfen und als Fallback eine lokale Datei einbinden 😉
Eine externe Einbindung halte ich auch angesichts einer serverseitigen Ausfalls für recht bedenklich und mitunter auch gewagt. Auch weiß man wirklich nicht, ob die Styles sich zukünftig ändern oder vielleicht die Adressierung geändert wird.
Ich habe auch schon oft gelesen, dass vor allem das benutzen des legendären „* {margin: 0; padding: 0;}“ die Parsezeit des Browsers erhöhen soll.
Heutzutage könnte man das natürlich vernachlässigen.
Wenn man aber sowieso alle Werte brav setzt kann man sich ein Reset trotzdem getrost sparen…
@Manuel
600 Byte, nicht 600 Kilobyte!
@Beta: Ich meinte jetzt keinen Serverlastigen Overkill.
Nur sind 600KB die bei jedem Seitenaufruf zusätzlich(!) zum eigenen CSS geladen werden – wenn man davon ausgeht, dass alle zurückgesetzten Werte nochmals überschireben werden – doch ein Batzen wie ich finde.
Wenn mans richtig macht, sollten nur noch etwa ein Drittel übrig bleiben. Alles jetzt mal grob von bisherigen Handhabungen geschätzt.
@Manuel:
Zu Deinem Overkill Szenario mit dem Universalselektor findet man im Web leider nichts. Hast Du Quellen, die das belegen?
@Mario:
>> Vielleicht sollte man noch erwähnen, dass der einsatz dieses „schlichten“ Reset-Stylesheets absolut unempfehlenswert ist, da dadurch z.B. die browserspezifischen Formular paddings, margins und borders überschrieben werden, was häufig nicht erwünscht ist. <<
Ok, wenn Du auf Formulare stehst, die in jedem Browser anders aussehen gebe ich Dir recht, aber wer will sowas schon!
@Helen:
Wie gesagt, der Reset besteht bei mir aus 5 Zeilen und die liegen mit im Haupt-CSS… also muss ich auch keine zusätzliche Datei laden.
„Warum man sowas extern einbinden muss ist mir etwas unverständlich. Drei Zeilen reichen wirklich aus.“
–> Hat man eine globale Reset-Datei für die ganze Website, wird man die Resets in einer Datei einbinden und die dann in alle Dokumente einbinden. Da noch die eigentliche CSS-Datei hinzukommt und vielleicht noch Java, überschreitet man so die Grenze von zwei Dateien, die zugleich von einem Server geladen werden. Liegt die Reset-Datei auf dem Yahoo-Server, geht es also schneller. Bringt aber auch nicht die Welt. Hat man aber viele Dateien implementiert, kann man das schon gezielt nutzen und zB die jQuery-Basis-Datei über Google einbinden.
Ich wußte gar nicht, dass ich ein Klassiker bin. Jedenfalls nutze ich die klassische Variante des CSS-Resets.
Bei externer Einbindung wäre ich persönlich sehr vorsichtig, da ich nicht weiß, ob sich irgendetwas an diesen Stylesheets geändert hat. Mit der klassischen Variante weiß ich jedenfalls, wo sie liegt und was genau der Inhalt ist.
Ralph
Generell ist vom *-Reset abzuraten, da jedes Element einer Seite durch diesen Selector laufen muss. Das ist ein absoluter overkill.
Ich persönlich verwende Eric Meyer’s Reset in abgewandelter Form. Es ist aber auch davon abzuraten, einen Reset zu verwenden, um dann die gleichen Werte mit eigenen CSS Stilen zu überschreiben.
Sobald man einen Stil setzt, sollte man den Reset-Wert aus dem Reset Stylesheet löschen.
Hier ist „Setzen, nicht überschreiben“, die Devise!
Gruß
Manuel
Vielleicht sollte man noch erwähnen, dass der einsatz dieses „schlichten“ Reset-Stylesheets absolut unempfehlenswert ist, da dadurch z.B. die browserspezifischen Formular paddings, margins und borders überschrieben werden, was häufig nicht erwünscht ist.
Ich kann noch empfehlen, sofern gewünscht, im Universal-Selektor die Schrift-Familie zu setzen. Textareas halten sich ja bekanntlich nicht an den im Body-Tag benutzten Font…
Warum man sowas extern einbinden muss ist mir etwas unverständlich. Drei Zeilen reichen wirklich aus.