Pillole di CSS: Cos’è un Reset?

Immagine tratta da: http://it.depositphotos.com
Tempo stimato di lettura: 2 minuti, 44 secondi
Pubblicato il 2 maggio 2013

Se non hai ancora avuto l’occasione di conoscerli te lo spiego subito, i CSS Reset sono dei piccoli file CSS che aiutano noi Designer a resettare gli stili CSS superflui impostati da ogni browser, evitando così tutte le differenze cross-browser, al limite del possibile.
Praticamente annullano tutti gli stili preimpostati, così da avere una tela bianca su cui creare il nostro Design.
In questa immagine puoi vedere a sinistra una pagina html senza css reset, a destra trovi la stessa pagina dove è stato aggiunto il CSS reset. La pagina con css reset è la stessa su ogni browser a differenza di quella a sinistra che verrà visualizzata in modo leggermente diverso su ogni browser.

contestexample

I CSS Reset sono quindi necessari nella creazione di un sito web, e non utilizzarli comporterebbe delle frustranti differenze di visualizzazione nei vari browser.
Questi reset però hanno dei grossi limiti:

  • Non correggono i più comuni bug dei browser.
  • Non aggiungono il supporto agli elementi HTML5
  • Ti costringono a riscrivere tutti gli stili da capo(compresi gli h1,h2…)
  • Hanno una scarsa documentazione e sono poco personalizzabili

Ma esiste una soluzione a tutto questo? Certo! Si chiama normalize.css frutto di oltre 100 ore di ricerche dettagliate fra le differenze di stile nei browser condotte da @jon_neal  e @necolas.
Esistono anche altri progetti che cercano di andare oltre a un normale Reset del CSS, oggi però vi voglio parlare di quello che secondo me è il migliore.

Cos’è Normalize.css?

Normalize.css è un piccolo file CSS, un alternativa ai CSS Reset, che provvede a una migliore consistenza cross-browser nei stili di default dei vari elementi HTML oltre a correggere vari bug ed a essere documentato perfettamente.

Panoramica

  1. Normalize.css mantiene le più utili definizioni di stile preimpostate dal browser senza eliminarle, garantendo anche il supporto cross-browser.
  2. Normalize.css corregge i più comuni bug, un obbiettivo fuori dalla portata dei più comuni CSS Reset. Questo include il supporto agli elementi HTML5, corregge il font-size nei testi preformattati, SVG overflow in IE9, e molti altri bug conosciuti nei browser.
  3. Normalize.css non crea confusione nei tuoi debugging tools. Cosa che invece nei Reset avviene per colpa della catene di ereditarietà.
  4. Normalize è modulare, ciò significa che è diviso in comode sezioni indipendenti che ti permettono di modificarlo a piacimento con poca esperienza.
  5. Normalize.css ha una grande documentazione del tutto assente nei normali Reset. Significa che puoi capire riga per riga come agisce e perchè agisce. Qui trovi la documentazione completa su GitHub.

Come puoi notare normalize.css va molto oltre il normale CSS Reset ed è per questo motivo che dovresti iniziare ad utilizzarlo da subito.

Come usare normalize.css

Usarlo è semplicissimo, devi seguire solo due passaggi:

  1. Scarica l’ultima versione qui: http://necolas.github.io/normalize.css/
  2. Inserisci il file css nella pagina su cui vuoi lavorare.

<link rel=”stylesheet” type=”text/css” href=”/normalize.css” />

Ora non ti resta che provarlo e fammi sapere cosa ne pensi, ti consiglio anche di dare un’occhiata al file CSS e magari provare a modificarlo secondo le tue esigenze.
Ti stupirai della semplicità e chiarezza che caratterizza normalize.css

E se non sei ancora convinto sappi che è usato da Twitter Bootstrap, HTML5 Boilerplate, YUI 3,TweetDeck, Soundcloud, NASA, GOV.UK, Digg, iA, CSS Tricks e molti altri siti web…

Shares