CSS resetten

Das leidige Thema Browserkompatibilität beschäftigt Webdesigner übermäßig. Jeder Webbrowser rendert die Seiten mehr oder weniger unterschiedlich. Das nachträgliche Basteln am Stylesheet erzeugt häufig weitere Unterschiede. Deswegen nimmt man gerne besondere Regeln an Bord eines Stylesheets, um den häufigsten Problemen vorbeugend aus dem Weg zu gehen.

Sternchen zuerst

Typisch für einen CSS-Problemlöser wäre eine erste Deklaration:

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

Der sogenannte Sternchenselektor oder Asterix versteht sich als Platzhalter aller denk­baren Tags, Classes und IDs. So kann man problemlos den sogenannten Browserversatz abstellen. Jeder Browser hat unterschiedliches Padding eingestellt. Randloses Weblayout geht nur ohne dem. Als Wert ist jeweils "0" angegeben—da braucht es keine Einheiten-Angabe, wie z.B. "px" oder "em". Border "0" lässt Ränder verschwinden. Absätze, Bilder Listeneinträge schließen abstandslos an und können nur individuell gesteuert werden.

Eric Meyer CSS-Reset

Viele Developer haben sich Gedanken gemacht, welche weiteren Dekla­tio­nen nötig wären, um eine möglichst einheitliche Ausgangslage zu schaffen; Eric Meyer ist mit seinem genialen Base-Stylesheet bekannt geworden. Sein Vorschlag ist quasi zum Standard geworden. Eric geht gründlich ans Werk:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p …
{margin:0; padding:0; border:0; outline:0; …}

Es sind nicht nur notwendige Angaben zum Ausblenden überflüssiger Ränder usw. vor­han­den. Es findet sich auch weitere wertvolle Angaben. Ein Beispiel ist

vertical-align: baseline;

wodurch Bilder und Text gleichmäßig an Grundlinie ausgerichtet sind. Eric ist mittlerweile durch ständige Verbesserung zur Version 2.0 seines Resets gelangt. Es findet sich z.B.

:focus { outline: 0; }
Hiermit wird der lästige blaue »Firefox-Rand« um verlinkte Bilder unterdrückt. Auch die zunehmende <strong>HTML5-Nutzung</strong> wird nun berücksichtigt:
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block }

Ich will nicht alle Einzelheiten besprechen, wo z.B. auf raffinierte Weise IE-Probleme gefixed sind. Schauen Sie sich die eigenen Kommentare auf Erics Site an. Probieren Sie, das Reset in Ihr eigenes Stylesheet einzusetzen. Dafür kopiert man Erics Code und setzt diesen einfach vor seinen eigenen Style-Deklarationen an erster Stelle.

Vor- und Nachteile

Erics Reset ist Public Domain und kann somit problemlos kopiert und eingesetzt werden. Aber wie steht es mit der Ladegeschwindigkeit? Das Reset bringt ziemlich genau 1100 Byte auf die Waage, auch optimiert. Ein ausgewachsenes Stylesheet, nehmen wir z.B. das vom TwentyTen-Theme (1300 Zeilen) von WordPress, hat ungefähr 22.000 Byte. Das ist im Verhältnis weniger als 1 : 20. Damit belastet das Reset mit weniger als 5%. Wenn man die Zeilen Code durchzählt, dann ist das Verhältnis noch geringer. Ich glaube, damit kann man gut leben.

Ein weiteres Problem ist, dass man etwas mehr aufpassen muss, wie die Seiten dar­ge­stellt werden, denn es gibt weniger Automatismen, an die man sich gewöhnt hat. Eine Liste hat z.B. keine Bullets mehr. Für eine Listennavigation ist das prima. Möchte ein Kunde allerdings im Content eine kleine Liste mit Bullets einbauen, dann sieht er das vielleicht noch im Backend, aber auf der Site nicht mehr: #Fail!

Brutalst möglichst radikal

Wem das alles nicht zu weit geht, der kann das Yahoo-Reset ausprobieren, was wirklich alles radikal glatt bügelt. Headlines haben Normalgröße, Tabellen verlieren Ihre Linien, Blockquotes die Quotes usw. Kann man sich hier mal anschauen, vorher bitte ein, zwei starke Kaffees trinken, das ist harter Tobak! War es schlimm? Jetzt können Sie sich abregen, denn es gibt natürlich auch ein Yahoo Base-CSS, was eine konsistente und abgestimmte brauchbare Basis einer Website bildet. Sollte man ausprobieren, ob man mit diesem an sich sicheren Gerüst weiter kommt.

Und noch mehr?

Die Weiterführung vorbereitenden CSS-»Resets« mündet in die sogenannten CSS-Frameworks, die einem auch strukturell vorbereitete Merkmale bietet. Damit wird eine durchgehend vertikales Raster auf Grundlinienbasis geboten oder häufiger ein Seitenraster.

Links

Simple CSS App
Setting Type on the Web to a Baseline Grid

Comments are closed.

QR Code Business Card