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;
}
[/php]
(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!
Schreibe einen Kommentar