Als Webentwickler schaut man sich eine Webseite nicht einfach an, man erforscht sie. Wenn ich eine neue Seite besuche und sie mich vom Design her anspricht, gucke ich mir des öfteren auch den Quellcode an. Zum Teil sind mir da schon die lustigsten Kommentare oder class/id-namen vorgekommen…

Schenkt man den CSS Dateien mehr Achtung, erkennt man schnell das viele Webseiten CSS Resets verwenden. In einer Zeit mit mehr als fünf bekannten Browsern ist das natürlich auch gar keine schlechte Idee, denn fast jeder Browser hat seine eigenen kleinen Standards und Tücken – wie zum Beispiel ein vordefinierter margin oder padding Wert. Um aber sicher zu gehen, das alle Browser den gleichen Ausgangspunkt haben, benutzt man halt CSS Resets.

In diesem Artikel werden ich Resets vorstellen, die ich bisher benutzt habe.

Version 1

Der Reset meiner Seite ist verhältnismäßig kurz und verständlich:

* {
	padding: 0;
	margin: 0;
	}

Version 2

Eine zweite Variante wäre es, den Standardwert ‘border’ auf 0 zu setzen:

* {
	padding: 0;
	margin: 0;
	border: 0;
	}

Version 3

Eine wie ich finde sehr gute Alternative zu den beiden ersten. Dieser Reset handhabt eigentlich alles wichtige.

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	}

Version 4

Der nächste Reset setzt nur den padding und margin Wert innerhalb des html und body blocks auf 0, geht sicher das die Schriftgröße überall gleich ist und entfernt den Rahmen bei Bildern.

html, body {
	padding: 0;
	margin: 0;
	}
html {
	font-size: 1em;
	}
body {
	font-size: 100%;
	}
a img, :link img, :visited img {
	border: 0;
	}

Version 5

Ein weiterer Reset ist Siolon’s CSS Browser Reset.

* {
	vertical-align: baseline;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: none;
	padding: 0;
	margin: 0;
	}
body {
	padding: 5px;
	}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
	margin: 20px 0;
	}
li, dd, blockquote {
	margin-left: 40px;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}

Version 6

Selbst die Entwickler bei Yahoo! haben einen eigenen Reset geschrieben:
(YUI 2: Reset CSS)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {
	padding: 0;
	margin: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
fieldset,img {
	border: 0;
	}
address,caption,cite,code,dfn,em,strong,th,var {
	font-weight: normal;
	font-style: normal;
	}
ol,ul {
	list-style: none;
	}
caption,th {
	text-align: left;
	}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-size: 100%;
	}
q:before,q:after {
	content:'';
	}
abbr,acronym { border: 0;
	}

Version 7

CSS guru Erik Meyer hat einen recht umfangreichen Reset zusammengestellt, welcher alles abdeckt, was zu beachten wäre. Eine immer aktuelle Version seines CSS Reset findet man hier.

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot,
thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend {
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
	}
/* remember to define focus styles! */
:focus {
	outline: 0;
	}
body {
	background: white;
	line-height: 1;
	color: black;
	}
ol, ul {
	list-style: none;
	}
/* tables still need cellspacing="0" in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
	}
caption, th, td {
	font-weight: normal;
	text-align: left;
	}
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	}
blockquote, q {
	quotes: "" "";
	}

Das waren sieben Versionen von denen ich bisher fünf verwendet habe. Es ist natürlich jedem selbst überlassen, ob und wie er CSS Resets einsetzt. Es sei aber jedem der noch nie etwas davon gehört hat zu sagen, das sie sehr wohl wichtig und von nutzen sind und nicht fehlen sollten.