CSS-Reset: Rücksetzen der Browservorgaben

1 | 33409 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