Über mich

Startseite arrow Tipps & Tricks arrow Reset CSS - Um alles auf Null zu stellen

Reset CSS - Um alles auf Null zu stellen
Dienstag, 15. Juli 2008
Geschrieben von Armin Vieweg
Sogenannte Reset CSS werden immer beliebter. Sie setzten alle Einstellungen die von Browsern vorgegeben werden zurück und ermöglichen so einen kompletten Style-Restart.

Als ich heute so durch die News-Seiten surfte bin ich auf einem Bericht gelandet, der die neue Internetseite für Windows von Microsoft beschrieb. Ich schaute mir die Seite sofort an und abgesehen von genau 100 Validitätsfehlern ist mir die reset.css Datei aufgefallen.



Innerhalb dieser CSS-Datei befinden sich Angaben über jedes Element, dass man in HTML verwenden kann. Überall wird das Padding und Margin auf 0 gesetzt, der Border ausgeblendet, die Schriftgröße auf 100% gesetzt und der Hintergrund auf transparent gestellt.

Der Grund für eine solche Reset-CSS-Datei ist einfach: Verschiedene Browser haben verschiedene Grundeinstellungen, wenn es um das Interpretieren von nicht veränderten Eigenschaften diverser Elemente geht. Soll einfach heißen, dass wenn ich einer Headline z.B. H1 keine Größe zuweise, der IE font-size:18px und der Firefox font-size:20px macht.

Oder was auch jeder kennt ist, wenn man ein Bild mit einem Link umschließt erhält man einen etwas dickeren, blauen bzw. lila Rahmen.

Solche und viele weitere Voreinstellungen der Browser werden durch die reset.css im Vorfeld abgefangen.

Und so sieht die reset.css Datei aus

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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, 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-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

:focus {
    outline: 0;
}

ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}



Wer sich jetzt fragt, warum die ganzen Elemente aufgelistet werden und nicht einfach mit einem * (einer Wildcard) ab gefrühstückt werden dem sei gesagt: Nicht jeder Browser unterstützt diese Wildcard.

Ich persönlich nutze solche reset.css fast nie, jedoch will ich den praktischen Nutzen darin nicht leugnen.



Quelle

Meyerweb Reset CSS





  Kommentare (5)
 1 Geschrieben von: Christoph, am 16.07.2008 um 16:00
Ich finde diese reset-Dateien auch nicht so gut, weil sie meistens einfach überflüssig sind und manchmal auch Mehrarbeit verursachen.  
Es gibt zu diesem Thema einen interessanten Artikel von Jens Meiert: 
 
http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
 2 Geschrieben von: Scream, am 22.07.2008 um 19:22
ein weiterer Grund warum man nicht * nutzen sollte ist die geschwindigkeit 
das rendern der page dauert erheblich länger als alle elemente einzeln aufzuzählen!
 3 Geschrieben von: Der Meister, am 28.04.2009 um 19:22
Hallo!  
 
Warum keine Wildcard?  
Hier lesen: 
http://www.drweb.de/magazin/css-neustart/ 
 
 
"(…)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. (…)"
 4 Geschrieben von: Armin Vieweg, am 28.04.2009 um 19:20
Dieser Reset ist etwas komplexer als ein einfacher Stern als Wildcard. Fett, Kursiv und Unterstrichen wird dadurch nicht unterdrückt und Links behalten ihren charakteristischen Unterstrich. 
 
Auf die Wildcard wird hier verzichtet, da es allgemein als performanter gilt die Elemente einzeln aufzulisten, auch wenn dadurch die Dateigröße geringfügig angehoben wird. 
 
Es gibt beide Varianten (mit Wildcard und ohne) und beide haben ihre Existenzberechtigung mit Vor- und Nachteilen. 
 
Diese Variante hier ist schlicht umfangreicher und berücksichtigt auch Eigenarten mancher Browser bei z.B. dem Element Blockquote.
 5 Geschrieben von: Matthias, am 28.03.2010 um 22:08
Wirklich toll erklärt, wozu dieser CSS-Reset gut ist...
Letzte Aktualisierung ( Dienstag, 15. Juli 2008 )
 
< Zurück   Weiter >



Tipps & Tricks Kategorien

Beliebteste Tipps