Browserhersteller setzen die Vorgaben des „W3C“:http://w3.org recht unterschiedlich um. Ich habe daher für mich einen „Browserreset“ geschrieben, der erstmal alles auf NN bringt („@reset.css@“:http://kronn.de/code/css/reset.css). Ein paar weitere Regeln legen dann das Fundament für das eigentliche Design. Die Schriftgröße ist nur an einer Stelle (als skalierbares Keyword) definiert, alles andere kann dann über em-Werte darauf aufbauen.

Das war jetzt die Kurzfassung, ab hier folgt eine etwas längere Gedankensammlung zum Hintergrund, zum Verhältnis CSS/XHTML allgemein und so weiter. Der Code ist auch online zu sehen. Dies und weitere Ergänzungen stehen in Beitrag „Reset-Code“:http://kronn.de/weblog/2004/11/04/reset-code/.

h3. Hintergrund

Daran erinnert hat mich „Eric Meyer“:http://www.meyerweb.com/ mit den Beiträgen „Really Undoing html.css“:http://www.meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/ und „fractionally restoring html.css“:http://www.meyerweb.com/eric/thoughts/2004/09/20/fractionally-restoring-htmlcss/ und der „Global White Space Reset“:http://leftjustified.net/journal/2004/10/19/global-ws-reset/ von „Andrew Krespanis“:http://leftjustified.net/, den ich auch „hier“:http://blog.hessendscher.de/archives/2004/10/19/css_global_white_space_reset.php und „dort“:http://www.dyingeyes.de/index.php?p=141 auf Deutsch erwähnt gesehen habe.

An sich fand ich das immer nur praktisch und logisch, schließlich enthält „CSS2“:http://www.w3.org/TR/REC-CSS2 nur eine informatives „Beispiel-CSS für HTML 4.0“:http://www.w3.org/TR/1998/REC-CSS2-19980512/sample.html. Auch wenn es in „CSS2.1“:http://www.w3.org/TR/CSS21 als Standard bezeichnet wird, bleibt es doch nur ein informativer Anhang. Die Schlussfolgerung daraus ist, dass ich als Webentwickler keinerlei Garantie habe, wie HTML dargestellt wird. Wenn ich also versuche, ein eigenes oder gegebenes Design umzusetzen, kann ich entweder versuche, an alles zu denken, oder erstmal reinen Tisch machen.

h3. HTML mit CSS aufräumen

Letztlich ist CSS doch eine Ebene der Trennung von Struktur und Darstellung, richtig? Wer sagt denn dass ein pre-Block in einer Schrift mit fester Breite gesetzt wird? Wer sagt denn, ob und wie Leerzeichen dargestellt werden?
Was semantisch als Tabelle daherkommt, muss doch noch lange nicht so dargestellt werden. {display:inline; } nennt sich der Trick. Anders herum könnte ich auch wie eine h1 darstellen oder aus einer div-und-span-Sammlung eine Tabelle machen.

Praktisch sieht es natürlich ein wenig anders aus. @display:table[…];@ versteht der IE schonmal nicht. :after und :before genauso. Aber eben weil es in der echten Welt(tm) anders ist, verwende ich den CSS-Reset.
Egal, ob ich nach einer Vorlage gestalte oder ob ich spielerisch probiere, ich finde es einfacher, von Null anzufangen und alles gründlich zu definieren.

Die reset.css hackt aber nicht wirklich alles auf Null runter. Block- und Inline-Elemente werden unterschieden und, obwohl es den IE nur am Rande interessiert, wird die Listen- und Tabellendarstellung ist wieder normalisiert und Formularelemente wieder eingereiht. Außerdem werden — so unsinnig es erscheinen mag — die Kopfdaten versteckt. Damit behandeln wird unser XTHML bereits jetzt schon wie vollwertiges XML und ignorieren die internen Browservorgaben.

h3. nach dem Aufräumen ist vor dem Aufräumen

Um das tatsächliche Ergebnis auch praxistauglich zu halten, gibt es noch den Punkt _Optionales_ im CSS. Dort finden dann die ersten echten Einstellungen statt.

* Die verwendete Schrift wird recht genau festgelegt. Diese Kombination deckt Windows, Linux und Mac ab. Die Reihenfolge ist dabei wichtig. Hintergrund dazu gibt es bei „Mark Newhouse“:http://realworldstyle.com/fonts.html. Wer auf Windowssystemen eine andere Schrift möchte, sollte _vor dem Eintrag_ „Verdana“ seine Wunschschrift eintragen. Verdana selbst sollte drin bleiben, um als Sicherheit zu dienen. Ich habe die Trebuchet dort eingefügt, mal als Beispiel.
* Die Schriftgröße wird mit dem keyword @small@ definiert. Der IE kann das skalieren.
* Die Zeilenhöhe ist auf 1.5 em festgesetzt.

Diese drei Größen sind für alle Elemente gültig, da weiter oben für diese Eigenschaften der Wert @inherit@ gesetzt wurde. Danach definiere ich eine vielleicht selten verwendete Eigenschaft: den Cursorstil. Ich habe das am Anfang rücksichtslos für alle Elemente auf „normaler Mauszeiger“ gesetzt, da ich die Unruhe, die sonst bei der Mausbewegung entsteht, vermeiden möchte.
Für Links lege ich wieder den gewohnten @pointer@ fest. Ich hatte das eine zeitlang nicht gemacht, was zu Folge hatte, dass der sich Cursor über Links gar nicht mehr verändert wurde. Interessanterweise ist aber genau das ein subtiles aber entscheidendes Merkmal eines Links (jaja, Herr Nielsen, von wegen „farbig und unterstrichen“:http://www.useit.com/alertbox/20040510.html…).
Ähnliches gilt für Eingabefelder, bei denen ich die Einfügemarke einstelle.

h3. Nutzen und Entwicklung

Trotz aller schönen Definitionen wird man auch jetzt kein Pixelperfektes Aussehen von Webseiten quer über alle Browsergrenzen hinweg erreichen, aber es ist doch wesentlich leichter, da die unterschiedlichen Voraussetzungen etwas angepasst werden.

Man kann mit Sicherheit noch einiges an der reset.css verbessern. Man kann sich überlegen, ob es eher universell sein sollte, oder auf ein Projekt zugeschnitten. Wenn man es zurechtschneidet, integriert man vielleicht die Listendarstellung wonaders, nimmt ein paar CSS-Hacks auf oder schreibt die Schriftdefinition direkt in den ersten Block hinein. Genauso kann man natürlich auch nur die verwendeten Elemente aufzählen, um weitere Bandbreite zu sparen.
Ob ihr nun Hacks einsetzt, alles so lasst, das Ding komplett umstellt oder erweitert: Ich wäre auf eure Meinung gespannt: Ist das übertrieben? Ist das zu kurz gegriffen?