Resettare il CSS di default dei browser

Uno dei primi ostacoli da superare durante la realizzazione di un sito web, è l’omogeneità del layout sui differenti browser. Oggi voglio svelarti un “trucchetto” per farti risparmiare tempo.

Avrai notato che, se compili il codice CSS del tuo sito e apri la stessa pagina su browser diversi, il layout appare più o meno differente e in certi casi le variazioni possono rivelarsi un problema, costringendoti a dedicare diverso tempo per correggerle. Questo è dovuto al fatto che ciascun browser ha un proprio stile CSS predefinito, con impostazioni diverse per le varie proprietà, come margin, padding, border, ecc. Quindi dovresti metterti di buona lena ed azzerare il tutto sovrascrivendo, proprietà per proprietà, il CSS di default. Fastidioso e faticoso, vero? Ma ecco la soluzione: utilizzare un Reset CSS!

Questo file non è altro che un documento già pronto contenente tutte le regole CSS necessarie ad azzerare gli stili predefiniti dei browser. Ti basterà scaricare un Reset CSS a tua scelta tra quelli che ti elencherò qui sotto, inserirli nella tua pagina web, prima di qualsiasi altro foglio di stile o regola CSS, ed il gioco è fatto.

Ecco una lista di Reset CSS:

  • Eric Meyer: famoso è molto diffuso sul web, è un ottimo file per via della sua compattezza, che consente buone prestazioni. Clicca qui per scaricarlo
  • YUI3: creato ed utilizzato da Yahoo!, non male. Clicca qui per scaricarlo
  • Normalize: il mio preferito. Utilizzato anche per Bootstrap e HTML5 Boilerplate, contiene una lista molto precisa di regole CSS, con commenti che rendono il tutto molto chiaro anche per i neofiti del web. Clicca qui per scaricarlo


Spero che questo articolo ti torni utile per risparmiare tempo durante la realizzazione dei tuoi siti web. Se vuoi accedere ad altri consigli di questo tipo, puoi iscriverti ai nostri corsi di formazione di web design.

Questo articolo ti è piaciuto? Condividilo con i tuoi amici!

Commenti

Il tuo giudizio è importante! Commenta qui sotto.

Lascia per primo un commento sull'articolo!

Iscriviti alla newsletter

Ho letto e accetto l'informativa sulla privacy.

Icona caricamento

. . .