CSS-Reset: Rücksetzen der Browservorgaben

1 | 4 Kommentare | 31173 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS-Reset: Rücksetzen der Browservorgaben" mit Ihrem Wissen!

Anzeige Hier werben

CSS-Reset, was ist das?

CSS-Reset wird ein Stylesheet oder ein Teil eines Stylesheets genannt, der die Browservorgaben für die Anzeige der Elemente, oder auch nur Teile davon, entfernt. Der klassische CSS-Reset entfernt so jegliche margin/padding-Angaben, für alle Elemente.

Der Autor eines Stylesheets muss demnach bei der Definition von eigenen CSS-Eigenschaften Browserunterschiede nicht mehr beachten. Verschiedene Browser definieren normalerweise beispielsweise die Einrückung von Listen unterschiedlich.

Verschiedene Arten des CSS-Resets

Inzwischen gibt es mehrere Vorlagen für einen CSS-Reset. Die wichtigsten sollen hier aufgelistet werden:

Klassische Methode: margin/padding zurücksetzen

Als allererster CSS-Reset ist wohl das Nullsetzen von margin und padding für alle Elemente zu sehen.

 
css
1
2
3
4
* {
    margin: 0;
    padding: 0;
}

Eric Meyers Methode

Eric Meyer geht noch einen Schritt weiter. Nicht nur werden die margin/padding-Werte nur für bestimmte Elemente zurückgesetzt, gleichzeitig werden auch weitere Eigenschaften entfernt. Beispielsweise werden bei Listen die Listenpunkte entfernt, gleichzeitig werden Standard-Farben für Schrift und Hintergrund festgelegt.

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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,
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: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
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;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

Eric Meyer - Version 2

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Fazit

Ein CSS-Reset kann die Arbeit bei der Erstellung neuer Templates stark vereinfachen, da nicht auf Browserunterschiede geachtet werden muss. Gleichzeitig wird es aber nötig alle Formate selbst zu definieren, was leicht einen enormen Zusatzaufwand bedeuten kann.

Da nach einem CSS-Reset zwangsweise alle Formate neu definiert werden müssen kann der Profi sich allerdings leicht angepasste Stylesheets erstellen. Das Stylesheet unterstützt aber dann nur vorgesehen Elemente, außer der CSS-Autor definiert auch Formate für derzeit nicht verwendete Elemente.

Gerade für Anfänger kann ein CSS-Reset Probleme bereiten, beispielsweise wenn die Abstände zwischen Absätzen in Pixel angegeben werden. Deswegen sollte man auch beim CSS-Reset wissen, was man tut. Die gängige Praxis gerade Anfängern den CSS-Reset vorzuschlagen kann leicht unsaubere Stylesheets und andere Probleme mit sich bringen.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "CSS-Reset: Rücksetzen der Browservorgaben" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS-Reset: Rücksetzen der Browservorgaben" hier bearbeiten.

Mitarbeiter

Kommentare: CSS-Reset: Rücksetzen der Browservorgaben

Neuen Kommentar schreiben
CSS-Resets braucht's nicht immer!
Beantworten

Ich denke, dass CSS-Resets ebenso für Anfänger wie teilweise auch für "Profis" ungeeignet sind; Oftmals werden durch grosse CSS-Resets(wie diese von Eric Meyer) Ladezeiten verlängert. Dann muss man bei jedem Element wieder neu padding und margin Eigenschaften hinzufügen, was die betreffenden CSS-Dateien wiederum vergrössert. Das bringt schlussendlich keinen grossen Vorteil, es sei denn, man kommt mit den Vorgaben des Browsers in die Quere. Über CSS-Resets und vorallem, wer CSS-Resets wirklich braucht, habe ich in meinem Blog auch geschrieben...

Benutzer gelöscht am 29.11.2008 um 13:45
Re: CSS-Resets braucht's nicht immer!
Beantworten

Das was man an Ladezeit und Traffic durch ein CSS-Reset hinzubekommt ist jetzt nicht so unglaublich viel (1-4kB).

Einfach ein Bild verkleinern und man hat den Traffic wieder drin...sogar mehrfach, wenn man einfach auf ein Bild verzichtet. Obwohl das bei normalen DSL-Verbindungen kaum eine Rolle spielen sollte.

nickname am 31.12.2009 um 14:05
unsaubere Stylesheets
Beantworten

Was versteht ihr unter "kann leicht unsaubere Stylesheets und andere Probleme mit sich bringen"?

btw. gibts hier im Editor kein <q>?

greez Tim

Tim Spiekerkötter am 29.06.2008 um 12:47
Re: unsaubere Stylesheets
Beantworten

Unsaubere Stylesheets von Anfängern, da eben nicht das Hintergrundwissen vorhanden ist, was überhaupt wie in welchem Browser Vorgabe ist. Setzt man beispielsweise nur margin/padding zurück bleiben trotzdem einige Unterschiede.

Andere Probleme gibts, weil man wirklich alles neu definieren muss. Gerade für einen Anfänger kann das kompliziert werden (z.B. Abstände zwischen Absätzen werden aus Unwissenheit mit einem padding statt margin formatiert). Für mich ein Grund den CSS-Reset keinem Anfänger zu empfehlen.

David Danier am 30.06.2008 um 12:12