Reset del css: Fogli di stile con maggiore compatibilità

Reset del css: Fogli di stile con maggiore compatibilità

L’obbiettivo di questo tips è quello di ridurre al minimo l’incompatibilità tra diversi browser nel parsing delle pagine, soprattutto per quanto riguarda altezze, margini, dimensioni dei font, tag di heading ecc..
Questo perchè ogni browser utilizza una diversa impostazioni di default per il rendering della pagina, quindi per evitare dimenticanze, è necessario operare effettuando delle sovrascritture riportando ad una impostazione di default più consona e consistente, permettendoci poi di lavorare serenamente occupandoci solamente del layout che stiamo creando.
La necessità di creare lo stile di reset generico, è venuta con l’avvento dei framework css come ad esempio blueprint, e ora anche se non si utilizza un framework css è buona regola per semplificarci il lavoro includere nelle nostre pagine questo css, perchè ci fornisce un punto di partenza consistente multi-browser.

Qui sotto riportato un esempio stabile di un css di reset, che l’autore Eric A. Meyer di meyerweb.com ci lascia tranquillamente utilizzare e modificare.

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
47
48
49
50
51
52
53
54
55
56
57

/* v1.0 | 20080212 */
 
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;
}
 
/* remember to define focus styles! */
:focus {
 outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
 
del {
 text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Riferimenti:
http://meyerweb.com/eric/tools/css/reset/
http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/