Weblog - kronn.de

CSS-Reset

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?

Abgelegt in: Code
Veröffentlicht am 30.10.2004 um 14:59
Dauerhafter Link zu "CSS-Reset"

  • Ein sehr interessanter Artikel, der mich erst einmal zum nachdenken gebracht hat. Ich denke ich brauche da noch ein wenig Zeit um irgendwann entscheiden zu können ob es wirklich sinnvoll ist dem Besucher (eventuell mit Modem) aufzubürgen ein ganzes extra CSS runter zu laden, oder ob es nicht doch sinnvoller ist mit Tests herauszufinden wie verschiedene Browser auf das schon vorhandene CSS reagieren.

    Die Schlussfolgerung daraus ist, dass ich als Webentwickler keinerlei Garantie habe, wie HTML dargestellt wird.

    Das hat er auch nicht wenn er alles genauestens festlegt. Ich denke da an diverse user.css oder auch an Screenreader und co. Um das zu erreichen muss man wohl in die Printindustrie gehen ;-)

  • Sehr interessant! Die ‚reset.css‘ werde ich mir mal angucken. Habe just die Tage meine ‚wp-layout.css‘ (die des Haupt-Layouts, die anderen werden folgen) aufgeräumt. Da war einiges zum Originalzustand hinzugekommen und manches umgebaut worden. Jetzt ist sie bereinigt, u.a. auch margin- und paddinweise auf Null gesetzt und um glatt 120 Zeilen kürzer als zuvor.

    Jetzt werde ich auch noch die Schriftgrößenangaben – relativ (mit em) – neu setzen, dabei wie du zuvor auf einen globalen Standardwert ‚resetten‘.

    Gerade bei meinen Experimenten mit zusätzlichen Layouts erweist sich die scharfe Trennung von Layout und Inhalt als fast schon notwendig. So habe ich mit dem Umbau des CSS wenig Arbeit, das meiste hängt an den jeweils neuen Hintergrundgrafiken.

  • _Jeena_, du hast echt ein Talent, mich mit Zitaten ad absurdum zu führen. Natürlich hat man auch mit den CSS-Reset keine Garantie, ich habe es nur ein wenig einfacher.
    Screenreader beachte ich in meinen CSS bisher noch gar nicht. Leider, muss ich sagen. Es gibt in diesem Bereich einige _sehr_ interessante Eigenschaften (Sprachausgabe usw.).

    Boris, die wp-layout.css habe ich gleich am Anfang über Bord geworfen. Allerdings eher aus Faulheit, mich darin einzuarbeiten.

  • Nett! Kommt gerade im richtigen Moment, da ich mir selbst über so was Gedanken gemacht und Konkretes gesucht habe.

  • Pingback: Nie wieder Frames. - SWiSHZone.de - Flashanimationen kinderleicht()

  • hans

    Also ich habe dein reset.css nun mal auf die Probe gestellt und laufe damit zT. in echte probleme rein. Um mal eins zu nennen:

    wird durch dein reset code als inline dargestellt, ist also nicht mehr hidden, zb. wenn elementen ein border verpasst wird. das sollte man da rausnehmen.

  • Henrik

    Sehr schön. Genau das habe ich gesucht, da ich gerade ein neues Webprojekt gestartet habe. Ich werde deine reset.css direkt mal ausprobieren. Mir ist es auch lieber wenn man erstmal alle „paddings“ und „margins“ etc. auf 0 setzt und selbst für jedes Element die Eigenschaften festlegt.

  • Pingback: Ein Paket xHTML + ein Päckchen CSS bitte » Jared()

  • Sehr schöne Sachen deine Bowserreset *.css.

    Wie oft hat man diese Browserprobs, von daher eine gute Sache.

    Super!

    Gruß aus KS

  • Pingback: Absolute Positionierung auf XYpx -1em - XHTMLforum()

Diese Internetseite wurde von Wordpress zusammenebastelt und besteht aus geprüftem XHTML und CSS.
Das hat viele Vorteile.

Weitere Seiten mit ähnlichen Vorteilen preisen gutes Webdesign an oder enthalten Texte.
So ist das Leben eben.
© Kronn/2003-2005

Mein Server hat, nebenbei gesagt, 0,296 Sekunden benötigt, das hier zu fabrizieren.
War aber nicht böse gemeint.


Fatal error: Uncaught Error: Call to undefined function set_magic_quotes_runtime() in /var/www/K1054131198/docroot/kronn.de/etc/counter/counter.php:61 Stack trace: #0 /var/www/K1054131198/docroot/kronn.de/weblog/wp-content/themes/kronn/footer.php(19): include() #1 /var/www/K1054131198/docroot/kronn.de/weblog/wp-includes/template.php(688): require_once('/var/www/K10541...') #2 /var/www/K1054131198/docroot/kronn.de/weblog/wp-includes/template.php(647): load_template('/var/www/K10541...', true) #3 /var/www/K1054131198/docroot/kronn.de/weblog/wp-includes/general-template.php(76): locate_template(Array, true) #4 /var/www/K1054131198/docroot/kronn.de/weblog/wp-content/themes/kronn/single.php(31): get_footer() #5 /var/www/K1054131198/docroot/kronn.de/weblog/wp-includes/template-loader.php(74): include('/var/www/K10541...') #6 /var/www/K1054131198/docroot/kronn.de/weblog/wp-blog-header.php(19): require_once('/var/www/K10541...') #7 /var/www/K1054131198/docroot/kronn.de/weblog/index.php(17): require('/var/www/K10541...') #8 {main} in /var/www/K1054131198/docroot/kronn.de/etc/counter/counter.php on line 61