back to top

CSS Reset: pagine web con uno stile veramente cross-browser

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:

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.

CSS:Resetr

Lascio, ovviamente, a voi il compito di scegliere la soluzione più adatta alle vostre esigenze di web design.

Altri contenuti interessanti

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Stilizzare HR (linee orizzontali) in puro CSS

Il tag <hr> (Horizontal Rule) รจ un elemento HTML...

Immagini riflesse con CSS

Il Flipping è una tecnica utilizzata dai grafici per...

Applicare un bordo alle lettere di un testo con CSS

Con l'avvento di CCS3 il linguaggo di stilizzazione delle...

CSS: dimensioni relative alla viewport con vw, vh, vmin e vmax

Con l'avvento e la diffusione di CSS 3 e...

Rimuovere CSS inutilizzato

Soprattutto quando si gestiscono progetti Web based di grandi...

CSS: centrare orizzontalmente un elenco puntato

Il sistema migliore per scrivere un buon menu è...
Pubblicitร