Il problema fondamentale quando si deve realizzare un layout web con i CSS è quello di far visualizzare correttamente le pagine in ogni browser. Quando si progetta il foglio di stile della pagina bisogna tener conto anche degli stili integrati di default in ogni browser, stili che assegnano un valore iniziale alle proprietà di ogni elemento.
Le differenze principali tra i browser si hanno per le proprietà margin e padding. Ogni browser assegna agli elementi un valore diverso quindi, in fase di realizzazione del layout, si otterrebbero risultati completamente diversi in ognuno di essi.
La soluzione più ovvia a questo problema è quella di impostare inizialmente a zero i valori dei margini e del padding, e di assegnarli poi agli oggetti in base alle esigenze del progetto su cui stiamo lavorando. La regola per azzerare margini e padding è la seguente. Facciamo uso del selettore universale * per applicarla a tutti gli elementi:
* {
margin: 0;
padding: 0;
}Ci sono però anche altre proprietà che vengono personalizzate dai browser, quindi il codice precedente non è sufficiente. Dimensioni dei caratteri, bordi, colori e molte altre proprietà hanno bisogno di essere uniformate per rendere il layout finale uguale in ogni browser.
Una soluzione più elaborata del codice precedente, quindi, potrebbe essere la seguente:
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}Altri elementi, però, contengono particolari proprietà che bisogna azzerare.
Vediamo una semplicissima pagina web con e senza la semplice regola di reset precedente. Nell'esempio 1 la pagina non utilizza alcun reset e, provandola con tutti i browser, si avranno risultati differenti; nell’esempio 2, invece, è stata utilizzata la regola di reset.
Per risolvere definitivamente il problema, da qualche anno a questa parte, sono stati realizzati diversi fogli di stile da includere nei nostri progetti che consentono di azzerare le proprietà personalizzate dei vari browser. Questi fogli di stile sono chiamati Reset CSS e vanno inseriti prima di tutte le altre regole CSS del progetto.
Vediamo insieme quali sono i fogli di reset più popolari.
Eric Meyer CSS Reset
Probabilmente è il più famoso tra quelli presenti in rete. Il codice che lo costituisce è il seguente:
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;
}Link.
YUI 2: Reset CSS
Il foglio di stile è realizzato da Yahoo! ed è il diretto concorrente del reset visto in precedenza. Il codice è il seguente:
html {
color: #000;
background: #FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
h4, h5, h6, pre, code, form, fieldset, legend,
input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, em, strong,
th, var, optgroup {
font-style: inherit;
font-weight: inherit;
}
del, ins {
text-decoration: none;
}
li {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
font-variant: normal;
}
sup {
vertical-align: baseline;
}
sub {
vertical-align: baseline;
}
/*because legend doesn't inherit in IE */
legend {
color: #000;
}
input, button, textarea, select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}Altri CSS Reset
Ci sono anche altri fogli di stile di reset meno famosi di quelli appena visti. Tra questi spicca sicuramente HTML5 Reset Stylesheet che, basato sul reset di Meyer, consente di azzerare lo stile anche ai nuovi elementi introdotti dalla specifica dell’HTML5.
Ulteriori fogli di reset sono i seguenti: