Warum CSS Resets verwenden?

Im letzten Jahr bin ich ein großer Fan von CSS Resets geworden und jedem, der häufiger mit Templates zu tun hat, wird dieses Thema schon einmal über den Weg gelaufen sein. Gerade bei Layoutoptimierungen, die über einen Browser hinausgehen, kann ein Nullen verschiedener CSS Attribute Gold wert sein. Im folgenden möchte ich kurz anhand von Beispielen erläutern, welche Möglichkeiten eines CSS Resets es gibt, welche und warum ich sie verwende.

Was macht ein CSS Reset
Im wesentlichen macht ein CSS Reset mit einem CSS Layout dass, was an der Küchenwage die Tara-Taste macht: alle im Reset enthaltenen Attribute werden auf 0 gesetzt. Dies ist nötig, da viele CSS-Eigenschaften von Haus aus Standardwerte besitzen, viele Selektoren haben sogar eine Vielzahl an Vorformattierungen. Der wohl bekannteste Reset wendet man direkt für den body-Tag einer Website an: von Haus aus, hat dieser nämlich ein margin von 8 Pixeln. Im Stylesheet wird dieser Wert zurück gesetzt und man erhält für alle weiteren HTML-Elemente wirklich die linke obere Ecke als Ausganspunkt für weitere Positionierungen, der Code hierzu sieht so aus:

body {margin:0;}

Vorteile eines Resets
Neben dem body-Tag haben noch viele andere HTML Objekte vorgegebene CSS-Werte, zum Beispiel Headings oder Absätze. Richtig “lustig” wird das ganze, wenn man sein Layout in unterschiedlichen Browsern betrachtet. Wie umfangreich diese Deafult-Sheets sind kann man sich schön anhand von Firefox ansehen. Im Installationsordner unter res/html.css findet sich die Standardkofinguration des Firefox, immerhin stolze 530 Zeilen Code (ca.). Kein Wunder, dass es bei anderen Browsern zu Unterschieden kommt.

Die Vorteile eines CSS Resets liegen also auf der Hand. Mit einem umfangreichen Reset, erhöht sich die Chance, dass das Layout über viele Browser hinweg gleich aussieht. Außerdem ist es sehr schwer, alle Standardformatierungen zu kennen, setzt man hingegen alle auf einen festen, vorgegebenen Wert weiß man beim coden direkt, woran man ist. Zumindest in meinem Fall hat sich dies positiv auf meine Geschwindigkeit beim CSS-Layouten ausgewirkt. Darüber hinaus fühle ich persönlich mich wohler, wenn ich die volle, gerne auch pixelgenaue Kontrolle über mein Layout habe.

Welche Resets gibt es
Der einfachste CSS Reset setzt margin und padding für alle Elemente auf 0, er würde so aussehen:

* {
    margin: 0;
    padding: 0;
}

Ich persönlich nutze Eric Meyers Reset mit ein paar von Projekt zu Projekt unterschiedlichen individuellen Anpassungen. Dieser Reset ist der umfangreichste, den ich bisher gefunden habe. Natürlich kommt es vor, dass man bei manchen Attributen die Standardwerte wieder hinzufügt, zum Beispiel die Schriftgrößen der Headings. Wie gesagt habe ich es aber lieber, die volle Kontrolle über mein Layout zu haben, deshalb nimm ich diese wenigen Zeilen Code, die ich wieder hinzufügen muss, gerne in Kauf. Hier der CSS-Code:

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}

Mehr Infos und nützliche Links

• A Killer Collection of Global CSS Reset Styles (Persihablepress.com
• CSS Tools: Reset CSS (Eric Meyer)
• Reset Reloaded (Eric Meyer)
• CSS Frameworks + CSS Reset: Design From Scratch (Smashingmagazine.com