CSS Reset: pagine web con uno stile veramente cross-browser
Pagina 1 di 2
In questo breve articolo sui CSS vedremo in cosa consiste la tecnica del CSS Reset e come utilizzarla al meglio per creare pagine web veramente cross-browser.
CSS Reset: cosa sono e a cosa servono
Creare pagine web perfettamente cross browser è un problema che, da diversi anni (cioè da quando Internet Explorer non ha più una quota di mercato pari al 95%) affligge tutti i web designer. Ma anche quando il risultato ottenuto è compatibile con tutti i browser (non si hanno, cioè, malfunzionamenti o difetti di visualizzazione tali da inficiare la fruibilità del servizio), l'output della pagina web risulterà quasi sempre diverso a seconda che venga visualizzata con IExplorer, Firefox, Safari, Chrome o Opera.
Sto parlando di piccoli differenze, a volte difficilmente percettibili, ma che comunque comportano un allontanamento del risultato finale rispetto alle aspettative del web designer (ad esempio perchè lo spazio tra due elementi risulta leggermente più grande su un browser rispetto ad un altro).
Questa problematica è dovuta alle impostazioni di default dei singoli software di navigazione le quali comportano delle differenze, più o meno vistose, nel rendering della medesima pagina web.
Al fine di risolvere questo problema si ricorre ad una tecnica che prende il nome di CSS Reset la quale consiste, in sostanza, nell'utilizzo di una serie di istruzioni CSS al fine di "azzerare" le impostazioni di default presenti nei singoli browser.
CSS Reset: una semplice soluzione
Una soluzione, poco raffinata, consiste nel dichiarare all'inizio del foglio di stile una regola che annulli, per ogni elemento della pagina, vari attributi normalmente predefiniti dai browser (come, ad esempio, margin e padding)
* {
margin: 0;
padding: 0;
}
oppure:
* {
margin: 0;
padding: 0;
border: 0 none;
outline: 0;
}
oppure, in modo più elaborato:
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
margin: 0;
padding: 0;
border: 0 none;
outline: 0;
}
In realtà mi sento di sconsigliare il ricorso a queste facili soluzioni in quanto il ricorso al selettore universale (l'asterisco) può comportare risultati non sempre ottimali.
