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.
CSS Reset: le soluzioni più diffuse
Al fine di risolvere questo problema, pertanto, sono nati dall’ingegno di molti web designer diversi fogli di stile per il reset delle impostazioni di default. Di seguito vi elencherò alcuni dei CSS Reset più noti ed utilizzati:
- Mayerweb Reset (probabilmente il CSS Reset più utilizzato)
- YUI 3 CSS Reset (questo CSS Reset fa parte della Yahoo! User Interface sviluppata all’interno del Yahoo! Developer Network)
- MaxDesign CSS Reset
- Siolon CSS Browser Reset
- HTML5 Reset Stylesheet (un reset appositamente pensato per HTML5 basato sul Mayerweb Reset)
- CSS mini-resrt (meno sofisticato degli altri CSS Reset; perfetto se si desidera resettare solo gli elementi più importanti e comuni delle pagine web)
Comparare i diversi CSS Reset
Come abbiamo visto esistono diverse soluzioni per il CSS Reset delle impostazioni di default dei vari browser. Al fine di effettuare una comparazione dei vari codici proposti (e molto altri) vi invito a visitare il sito CSS:Resetr che consente di visualizzare "al volo" l’effetto prodotto dai vari codici sui diversi elementi di una pagina web.
Lascio, ovviamente, a voi il compito di scegliere la soluzione più adatta alle vostre esigenze di web design.
