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. 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.

Pubblicità

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:

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.

CSS:Resetr

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.

Altri contenuti interessanti

Pubblicità

Potrebbero interessarti queste guide

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...

Video Background HTML e CSS: consigli, caratteristiche tecniche e best practices

Utilizzare un video come sfondo (noto anche come video background)...

Visualizzare il codice sorgente HTML di una pagina web su iPhone e iPad

Molti sviluppatori si trovano in difficoltà quando hanno bisogno...

Caratteri speciali negli URL: quali sono e come gestirli

Gli URL (Uniform Resource Locator) sono componenti fondamentali del...

Stilizzare HR (linee orizzontali) in puro CSS

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

Convertire PSD in HTML/CSS: ecco come fare

Avete deciso di creare un sito web ma non...
Pubblicità