Tipps und Tricks zum CSS-Reset

Mit Hilfe eines CSS-Resets zu Beginn des Stylesheets kann man die unterschiedlichen Standard-Styles verschiedener Browser auf einen einheitlichen Werte zurücksetzen. Darüber, welche Reset-Vorlage man verwendet sollte, und ob CSS-Reset Styles überhaupt nötig sind, wird bereits seit langem in der Webentwickler-Szene diskutiert. Meiner Ansicht nach gibt es wie so oft keine allgemein gültige Lösung auf diese Fragen, und als Webdesigner- und Entwickler sollte man sich je nach Projektanforderung entscheiden, ob und wie man ein CSS-Reset nutzen möchte. Daher habe ich einige hilfreiche Infos und Tipps zum Thema CSS-Reset zusammen gestellt.

Was ist eigentlich ein CSS-Reset?

Jeder der sich mit Webdesign und CSS auseinandersetzt, hat den Begriff CSS-Reset sicher schon einmal gehört oder nutzt bereits ein vorbereitetes CSS-Reset in seinen Stylesheets. Dennoch ist vielleicht vielen nicht gleich klar, wofür die Reset-Styles eigentlich benötigt werden.

Da Browser Webinhalte uneinheitlich darstellen, nutzt man die CSS-Reset Styles zu Beginn des Stylesheets, um die Werte von font-size, line-height, margin oder padding auf einen einheitlichen Wert zubringen.

Durch die Verwendung eines CSS-Resets sichert man sich also eine einheitliche Ausgangsansicht in allen Browsern, von der aus man dann mit der Umsetzung des eigenen Webseiten-Layouts beginnen kann.

Das CSS-Reset von Eric Meyer

Mit der Zeit haben sich bestimmte vorbereitete CSS-Reset Styles durchgesetzt. Eines der beliebtesten Dateien ist z.B. Eric Meyer’s CSS-Reset. Hier der CSS-Code der neustes Version:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

(Code-Quelle: meyerweb.com)

Eric Meyer empfiehlt es allerdings, seine CSS-Reset Styles nicht einfach nur in das eigene Stylesheet zu kopieren, sondern man soll die Styles viel mehr als Vorlage verwenden, und sie je nach Bedarf für das eigene Projekt anpassen.

Wenn du in deinem Webdesign-Layout z.B. einen Standard-Zeilenabstand von 1.4 planst, macht es Sinn diesen Wert auch gleich im CSS-Reset zu definieren, anstatt den Wert im Reset auf 1 zu lassen, nur um ihn gleich gleich wieder in den eigenen Styles mit 1.4 zu überschreiben.

In other words, this is a starting point, not a self-contained black box of no-touchiness.
– Eric Meyer

Weitere CSS-Reset Vorlagen

Natürlich gibt es nicht nur das CSS-Reset von Eric Meyer, sondern eine ganze Reihe weiterer CSS-Reset Vorlagen, wie zum Beispiel das ebenfalls sehr beliebte YUI 3 CSS Reset vom Yahoo Developer Network. Interessant ist vor allem die Integration moderner HTML5-Elemente ins Reset (diese sind ja übrigens auch in der neusten Version von Eric Meyers Reset bereits integriert).

Eine Erweiterung von Eric Meyer’s Reset ist das HTML5 Doctor Reset. In der Beschreibung zur überarbeiteten HTML5 Reset-Variante erklärt Richard Clark genau, welche Elemente und Styles er dem Reset hinzugefügt, und welche er entfernt hat.

Argumente gegen die Verwendung eines CSS-Resets

Allerdings hält nicht jeder Webentwickler die Verwendung von CSS-Resets überhaupt für sinnvoll. Es gibt seit langem schon eine Diskussion über die Notwendigkeit von Reset-Styles. Ein Argument gegen die Verwendung ist zum Beispiel, dass für das Web flexibel gestaltet werden muss, und daher nicht alle Browser die selben, pixelgenauen Ansichten eines Webdesigns generieren müssen.

Die Technik, erst einen Wert im CSS-Reset zu definieren und diesen dann gleich wieder mit den eigenen Styles zu überschreiben, scheint manchen Webentwicklern nicht sonderlich sinnvoll. Ein interessanter Artikel mit Argumenten gegen die Verwendung eines CSS-Resets ist auch Jonathan Snooks Artikel „No CSS Reset“.

Noch mehr Infos und Link-Tipps

Die Artikel „The History of CSS Resets“, „A Comprehensive Guide about CSS Resets“ und „Should you reset your CSS?“ bei Six Revisions bilden zusammen eine ausführliche Artikel-Serie zum Thema CSS-Reset.

Eine sehr nützliche Webseite, auf der du die unterschiedlichen Reset-Styles selbst testen kannst, ist der CSS:resetr. Hier kannst du verschiedene Inhaltstypen und CSS-Resets aus einer Liste auswählen, und dir in unterschiedlichen Browsern anschauen.

Was hältst du von der Verwendung eines CSS-Resets? Hast du weitere Tipps oder Artikel-Vorschläge, die zum Thema nützlich sind? Über deine Einschätzung und weitere Tipps freue ich mich sehr!

14 Kommentare

  1. Hallo Ellen,

    vielen Dank für deinen informativen Artikel und vor allem auch dafür, dass du auch die Kontra-Seite gezeigt hast.

    Ich nutze für meine Seiten schon sehr lange ein sehr reduziertes CSS-Reset. Allerdings wusste ich bis vor kurzem nicht, dass man es „Reset“ nennt ;)

    Es hat sich einfach als praktisch erwiesen wenigstens die margin- und padding-Werte und evtl. auch noch die border-Werte auf 0 zu setzen. Und solche Dinge wie die Schrift sind dort natürlich auch sehr gut aufgehoben.

    So ein umfangreiches Reset, wie das von Eric M. muss ich mir erstmal genau anschauen. Ich weiß gerne, was ich da benutze… ;)

    viele Grüße und einen schönen Abend,
    Regina

    • Hallo Regina,

      vielen Dank für dein Feedback zum CSS-Reset Thema. Ja, je nach Projekt müssen natürlich nicht alle Werte zurückgesetzt werden, oft reichen auch grundsätzliche. Wir selbst nutzen meist eine leicht abgewandelte Form des Eric Meyer Resets und sind damit eigentlich immer sehr zufrieden :-)

      Viele Grüße,
      Ellen

  2. Das sinnvollste und kürzeste CSS-Reset, das ich kenne, ist das in Jonathan Snooks erwähnte und besteht aus zwei Regeln:
    * { margin: 0; padding: 0 }

    Mehr braucht man meines Erachtens nicht.

    • Hallo Christian,

      vielen Dank für dein Feedback :-) a du hast Recht, viele Entwickler nutzen genau wie du lediglich den Universal-Selektor * und setzen so die Padding- und Margin-Werte auf Null. Im sehr interessanten Artikel „Should you reset your CSS?“ werden zu dieser Methode allerdings auch eventuelle Probleme angesprochen.

      Meiner Ansicht nach ist es auch noch sinnvoll, auf alle Fälle die Font-size und line-height Werte zurückzusetzen, und auch die Listen-Styles setze ich immer im Reset auf none.

      Viele Grüße,
      Ellen

  3. Hallo Ellen, danke für den interessanten Artikel.
    Wenn ich ein fertiges Template bekomme, wo das CSS-Reset drin ist, dann ist das OK. Aber selber verwende ich das eigentlich nie für meine Projekte.
    LG
    Lemi

    • Hallo Lemi,

      vielen Dank für deinen Kommentar und deine Einschätzung zum CSS Reset :-) Etliche Webdesigner/Entwickler nutzen kein CSS Reset und stellen sich darauf ein, dass ihr Layout in unterschiedlichen Browsern immer etwas anders gestylt wird. Besonders bei Schriftgrößen, Abständen oder line-height versuche ich persönlich allerdings immer, einigermaßen die Kontrolle über das Layout zu behalten und so eine möglichst optimale Lesbarkeit der Inhalte zu erreichen :-)

      Viele Grüße,
      Ellen

      • Hi Ellen,
        Deinen Einwand mit den verschiedenen, wenn auch minimal unterschiedlichen Schriftgrössen, verstehe ich.
        Ich selber übergehe diesen Punkt, da ich rund 90-95% der Webseitenbesucher ohne reset.css abdecken kann. Es ist ja nicht so, dass ohne reset.css gar nichts mehr geht.. ;-)

  4. Ich finde einen CSS Reset sehr sinnvoll und nutze ihn auch eigentlich fast immer. Bietet einfach eine bessere Ausgangssituation. Danke für den tollen Artikel.
    Und meiner Meinung nach ist {padding:0; margin:0;} heutzutage einfach zu wenig.

    • Hallo Sandra,

      vielen Dank für deine Einschätzung zum Reseten von CSS. Ich persönlich bin auch deiner Meinung und nutze selbst auch immer ein CSS Reset, die neuste Version von Eric Meyers Reset gefällt mir dabei besonders gut. Aber wie schon gesagt, kommt es sicherlich immer auf das jeweilige Projekt und die individuelle Arbeitsweise des Webentwicklers an :-)

      Viele Grüße,
      Ellen

  5. CSS-Reset: ja, auf jeden Fall! Ich nutze als Startpunkt immer Gerrits aktuelles Kickstart-Framework – und fahre damit seit Langem sehr gut. Kennt ihr das auch schon? Siehe http://praegnanz.de/weblog/htmlcssjs-kickstart

    Aber es stimmt natürlich auch: zuerst ein Reset, um dann wieder alle Objekte zu stylen – klingt irgendwie unpragmatisch. Trotzdem finde ich, dass einem das Resetten das Leben wesentlich erleichtert, dann man sich um einige Dinge einfach weniger Gedanken machen muss. V.a. beim Suchen nach Darstellungsfehlern, wie sie nun öfters mal vorkommen. Ohne Reset sind es meist eben Defaulteinstellungen, die einem in die Quere kommen – ohne, dass man es weiß.

    Drum tendiere ich weiterhin zum Reset-CSS.

    • @Stefan: Das Framework von praegnanz kannte ich noch gar nicht. Werde ich mir auf jeden Fall mal genauer anschauen. Sieht im wesentlichen schon sehr gut aus und passt zu den meisten Projekten.

      Generell halte ich CSS Resets für sehr sinnvoll. Ohne möchte ich gar nicht mehr arbeiten… Wenn ich mir nur an den ganzen Ärger erinnere, den ich vorher hatte wenn ich einen kurzen Blick allein auf die verschiedenen IE Versionen geworfen habe und feststellen musste, das selbst innerhalb der IE-Familie soviel unterschiedlich interpretiert wird…

      Pro RESET.

  6. Ich benutze mittlerweile auch bei jedem Projekt ein Css Reset. Wüsste auch nicht was dagegen spricht – Bandbreite hat heutzutage wohl jeder genug, sodass die paar Zeilen kaum ins Gewicht fallen dürften. Außerdem erleichtert es die Arbeit ungemein.

  7. Gerhard 1. Juli 2015

    Papperlapapp *gg* – Aber im Ernst: Ich bin eher der Einsteiger/Anfänger bezüglich CSS und suche manchmal ganz schön lange nach dem Grund warum manches nicht so aussieht wie ich meine es per CSS vorgegeben zu haben. Und da hat mir dieser css-reset sehr geholfen. Denn gerade als Anfänger weiß man nicht, oder denkt nicht daran, dass die Browser diverse Defaulteinstellungen beim CSS „einstreuen“. Wie war das herrlich entspannend als nach dem Einbinden vom css-reset die Webseite viel besser aussah (zumindest für mich… :-) Als Anfänger geht man davon aus dass eine Eigenschaft (z.B. Rand oder Abstand in einer Tabelle), die man nicht definiert hat auch nicht da sein/greifen sollte. Nun denn – ich denke obiger CSS-Code wird mir auch in Zukunft helfen viel Zeit zu sparen. Und über das „Für und Wieder“ braucht es keine Diskussion. Denn für die Entwicklung ist es unabdingbar, wer es danach immer noch drin lassen möchte soll das tun. Basta! ;-)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *