Der finale CSS-Reset von Eric Meyer

Alle Browser besitzen eine Reihe an standardisierten Style-Vorgaben, sog. default-styles, die grundlegende Dinge wie Innen- und Außenabstände von Überschriften, Ränder des body-Elements u.v.m  festlegen. Diese Styles wurden so gewählt, daß sie, sollten sie nicht vom Webdesigner festgelegt werden, in den meisten Situationen sinnvoll sind. Doch was tun, wenn die vordefinierten Styles uns als Designern in die Quere kommen? Auftritt: CSS-Reset!

Der CSS-Reset besteht aus einem Satz an CSS-Daten, die sämtliche default-styles auf Null setzen und den Designern & Developern damit volle Kontrolle über die Ausrichtung aller Elemente geben. Außerdem werden einige Dinge neu gesetzt, die bei den default-Styles bis heute fehlen - so z.B. Zitationsmarken (Gänsefüßchen) am quote-Element <q>.

Entworfen wurde der CSS-Reset von Eric Meyer. In zwei Durchgängen wurden die Inhalte des CSS-Reset dann von vielen Designern & Developern getestet und an Hand von deren Feedback verbessert. Nun ist der finale CSS-Reset fertiggestellt. Für alle diejenigen, die demnächst ihr nächstes Web-Projekt umsetzen, ist dieser CSS-Reset eine perfekte Grundlage für ihr zentrales CSS-File. Hier der finale 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;
background: transparent;
}

/* 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: collapse;
border-spacing: 0;
}

caption, th, td
{
text-align: left;
font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after
{
content: "";
}

blockquote, q
{
quotes: "" "";
}

Geschrieben am 02.05.2007