CSS Neustart

von Andreas Zwinkau
Durch eine kleine CSS-Datei gehören kleine Unterschiede zwischen Browsern und sogar der ein oder andere Bug der Vergangenheit an. Einfach einbinden und einige Sorgen weniger haben.

Wozu ein Neustart?

Viele CSS-Schreiber beginnen ihre Stylesheets mit einem obligatorischen *{padding:0;margin:0}. Die Browser haben unterschiedliche Einstellungen und so startet man von Grund auf neu. Vor allem für den Internet Explorer ist auch wichtig *{font-size:101%}, damit dieser ordentliche Schriftgrößen anzeigt und nicht manchmal mikroskopisch klein wird.
Ich benutze für mein CSS immer eine extra Datei reset.css. Sie war ursprünglich von Erik Meyer geklaut, wurde aber inzwischen überarbeitet und verfeinert. Diese Datei werde ich in diesem Artikel vorstellen und erläutern:

center, isindex, menu, dir,
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,
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: 101%;
font-family: inherit;
font-variant: inherit;
vertical-align: baseline;}

Die erste Frage ist meistens, warum muss ich denn alle Elemente aufzählen? Ob ich nicht *{…} kennen würde? Doch. Der Grund ist, dass ich input, textarea und select nicht verändern will, damit sie das systemeigene Aussehen behalten.
Genauso fehlen font-, u-, b- und i-Tags. Diese haben keine semantische Bedeutung und sollten ihre darstellerische Bedeutung behalten. Ähnlich verhält es sich mit dem a-Tag, dessen Unterstreichung man eher als User Interface denn als Design ansieht.

Kein Standarddesign

Man beachte, dass die Idee hinter diesen Einstellung nicht ist, ein gutes standardisiertes Aussehen vorzugeben. Im Gegenteil, das Aussehen wird absichtlich schlecht gemacht, damit der Designer daran erinnert wird, eigene Einstellungen zu setzen.
Aus dem selben Grund macht es auch nichts aus, dass der Internet Explorer die inherit-Werte weiter oben nicht kennt. Dieses Stylesheet erwartet, dass der Designer später sowieso irgendwelche Werte setzen wird.
In diesem Sinne noch ein paar Anweisungen mehr:

/* Remember to define focus styles! */
:focus { outline: 0px }

Die :focus sind notwendig, wenn der Besucher per Tab durch die Links auf der Seite schalten will. Aus Accessability-Gründen sollte man nicht vergessen hier noch etwas anzugeben.

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;}

Nicht überall ist schwarzer Text auf weißem Hintergrund die Grundlage und es gibt viele Websites, die dann sehr seltsam aussehen, weil sie das annehmen. Tabellen sind hiermit unsichtbar.

blockquote:before, blockquote:after,
q:before, q:after {content: none}
blockquote, q {quotes: none}

Wie man mit den automatischen Redezeichen umgeht, ist auch nicht einheitlich unter den Browsern. Mit diesen Anweisungen wird es einheitlich überall entfernt.

ul, ol, dl {position: relative}

Hiermit wird ein Bug in manchen Internet Explorer-Versionen repariert und es gibt keine negativen Auswirkungen in anderen Browsern, die mir bekannt sind.

html {overflow: scroll}

Wenn man ein zentriertes Layout baut, das auf manchen Seiten ins Browserfenster passt und auf manchen Seiten nicht, dann „springt“ die Seite hin und her. Je nachdem, ob ein Scrollbalken angezeigt wird, ändert sich die Breite der Anzeige und damit die Position des zentrierten Elements.

Benutzung

Die Benutzung meiner Stylesheet-Datei ist denkbar einfach. Erstens herunterladen und zweitens zu Beginn einer neuen CSS-Datei einfach folgende Zeile schreiben:

@import url("reset.css");

Anschließend darf man dann nach Herzenslust eigene Regeln angeben. Meine Empfehlung ist allerdings, nicht einfach meine Datei blind zu verwenden. Ich entwickle sie selbst ständig weiter und die Chance ist groß, dass sich die verlinkte Datei bereits von dem hier eingebetteten CSS unterscheidet. Man sollte diese Datei den eigenen Bedürfnissen und Verwendungen anpassen.

Nutzen

Es mag einem komisch vorkommen, dass man sich hier extra Arbeit macht, weil man ja nun alle Textalemente extra designen muss. Meine Erfahrung ist, dass ich mit diesem CSS-Neustart Zeit sparen kann. Man muss weniger Fehler reparieren, in der Phase, in der man das Design in verschiedenen Browsern testet. Man ist sehr viel näher an dem Ideal-CSS nach Standard, statt nach Browsern zu schreiben. ™
Andreas Zwinkau studiert Informatik an der Universität Karlsruhe und arbeitet als freiberuflicher Webdesigner.