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. Anche quando il risultato ottenuto è compatibile con tutti i browser, l’output della pagina web risulterà quasi sempre diverso a seconda che venga visualizzata con Internet Explorer, Firefox, Safari, Chrome o Opera.
Questa problematicità è causata dalle impostazioni di default dei singoli software di navigazione che portano a differenze, più o meno vistose, nel rendering della medesima pagina web. Nonostante l’assenza di malfunzionamenti evidenti, ci possono essere piccole discrepanze, come ad esempio spaziature variabili tra elementi, che possono influenzare l’aspetto finale del design.
Per affrontare quest’argomento, si ricorre a una tecnica nota come CSS Reset, che consiste nell’impostare una serie di regole CSS per “azzerare” le impostazioni di default dei vari browser. Questo approccio garantisce un punto di partenza uniforme, minimizzando le differenze di resa.
CSS Reset: una semplice soluzione
Una soluzione semplice consiste nel dichiarare all’inizio del foglio di stile una regola che annulli, per ogni elemento della pagina, vari attributi di default predefiniti dai browser, come il margin e il padding. Ad esempio:
* {
margin: 0;
padding: 0;
}In alternativa, si potrebbe scrivere:
* {
margin: 0;
padding: 0;
border: 0 none;
outline: 0;
}O, in modo più completo:
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
margin: 0;
padding: 0;
border: 0 none;
outline: 0;
}È importante notare, però, che l’uso del selettore universale (l’asterisco) non è sempre la soluzione ideale, in quanto può portare a risultati inaspettati e a prestazioni subottimali. È preferibile utilizzare reset mirati per controllare meglio il layout finale.
CSS Reset: le soluzioni più diffuse
In risposta a queste necessità, molti web designer hanno creato diversi fogli di stile per il reset delle impostazioni di default. Di seguito vi elenco alcuni dei CSS Reset più noti e utilizzati:
- Meyerweb Reset (probabilmente il CSS Reset più utilizzato)
- YUI 3 CSS Reset (parte della Yahoo! User Interface sviluppata nel Yahoo! Developer Network)
- MaxDesign CSS Reset
- Siolon CSS Browser Reset
- HTML5 Reset Stylesheet (un reset pensato per HTML5 basato su Meyerweb Reset)
- CSS Mini-reset (meno elaborato, perfetto per resettare solo gli elementi più comuni)
Comparare i diversi CSS Reset
Come abbiamo visto, ci sono diverse soluzioni per il CSS Reset delle impostazioni di default dei vari browser. Per confrontare i vari codici e comprendere meglio le differenze, vi invito a visitare il sito CSS:Resetr, che consente di visualizzare “al volo” l’effetto prodotto dai vari codici sugli elementi di una pagina web.
Lascio, ovviamente, a voi il compito di scegliere la soluzione più adatta alle vostre esigenze di web design. Ricordate sempre di testare il vostro CSS Reset nei vari browser per assicurarvi che il layout sia coerente e soddisfi le aspettative di progettazione.
