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:

Codice:

* {
    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:

Codice:

* {
    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'[Solo gli utenti registrati possono vedere i link. Clicca qui per registrarti..] la pagina non utilizza alcun reset e, provandola con tutti i browser, si avranno risultati differenti; nell’[Solo gli utenti registrati possono vedere i link. Clicca qui per registrarti..], 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.

[Solo gli utenti registrati possono vedere i link. Clicca qui per registrarti..]

YUI 2: Reset CSS
Il foglio di stile è realizzato da Yahoo! ed è il diretto concorrente del reset visto in precedenza.

[Solo gli utenti registrati possono vedere i link. Clicca qui per registrarti..]

Altri CSS Reset
Ci sono anche altri fogli di stile di reset meno famosi di quelli appena visti. Tra questi spicca sicuramente [Solo gli utenti registrati possono vedere i link. Clicca qui per registrarti..] 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:

• [Solo gli utenti registrati possono vedere i link. Clicca qui per registrarti..];
• [Solo gli utenti registrati possono vedere i link. Clicca qui per registrarti..].

[Solo gli utenti registrati possono vedere i link. Clicca qui per registrarti..]