Che cosa sono

Vi è mai capitato di utilizzare diversi browser e di notare delle differenze negli stili CSS osservando la stessa pagina web?

Quando realizziamo una pagina web vorremmo che tutti i browser (explorer, chrome, mozilla firefox, opera,…) ci mostrassero lo stesso stile degli elementi html.

Per essere sicuri che questo accada abbiamo bisogno di utilizzare dei file css che si chiamano CSS RESET.

I CSS Reset ci aiutano appunto a resettare lo stile predefinito dei vari browser evitando così tutte le differenze cross-browser! 😉

Ma quali sono le principali differenze fra i diversi browser? Le due principali le avrete sicuramente notate nel margin e nel padding.

Ora vi mostrerò due esempi: uno con il file css reset e l’altro senza.

In questo esempio non vi è alcun file css reset.


1

Quello che vedete è lo stile css predefinito del browser (che troveremo anche negli altri) sebbene con delle piccole differenze.

Nell’immagine sottostante invece troverete la stessa pagina, ma con il file css reset.


1

 

Come potete notare fin da subito è l’assenza di un titolo <h1>, dei margini e dell’interlinea. Il file css reset ha compiuto il suo dovere! 😀

In questo modo siete sicuri di poter scrivere da zero il vostro css e che in tutti i browser sarà possibile visualizzare lo stesso stile della pagina web.

Per poter inserire il file reset è sufficiente scrivere l’elemento <link> nella sezione <head> della pagina.

<link rel="stylesheet" type="text/css" href="url-del-file-css-reset">

Tuttavia, esistono diversi tipi di CSS Reset che possono assumere un comportamento differente; se prendiamo ad esempio quello di Eric Meyer tutti gli stili verranno cancellati in maniera definitiva. Se invece volessimo optare per una soluzione meno “disruptive”, allora dovremo utilizzare NORMALIZE.CSS.

Pertanto tra le due opzioni è meglio utilizzare la seconda! 😉

Normalize.css

Normalize.css è un’alternativa ai CSS Reset e presenta delle caratteristiche MOLTO VANTAGGIOSE:

  1. Prima di tutto, mantiene i principali stili impostati di default dai vari browser SENZA CANCELLARLI, evitando allo stesso tempo le differenze cross-browser;
  2. Corregge i vari bug che i normali CSS Reset non riescono ad individuare (ad esempio corregge i font-size nel testo preformattato  e include anche le impostazioni di display per gli elementi HTML5);
  3. Non crea confusione e non affolla i vari strumenti durante il debugging, cosa che accade invece nell’utilizzo dei normali CSS Reset a causa dell’ereditarietà degli stili.
  4. E’ modulare, ovvero che è suddiviso in diverse sezioni (rimovibili e indipendenti) ed è possibile modificarli in maniera autonoma. In questo modo abbiamo la possibilità di vedere in modo chiaro quali sono gli elementi che hanno bisogno di modifiche.
  5. Ha molta documentazione e pertanto è possibile capire riga per riga come agisce e perché, cosa che normalmente gli altri reset non fanno. L’intera documentazione la potete trovare su GitHub.

COME USARE NORMALIZE.CSS

Prima di tutto dovete scaricare Normalize.css da GitHub.

L’ultima versione la potete trovare al seguente link:

 http://necolas.github.io/normalize.css/

E ora, è tempo di RESETTARE!bigstock-reset-button-6741307

Ci sono due metodi principali per poterlo usare:

  1. Potete utilizzare normalize.css come punto di partenza per il vostro foglio di stile CSS cambiando i valori presenti e personalizzandolo in base alle vostre esigenze di design;
  2. Potete includere normalize.css nella pagina su cui vuoi lavorare senza cambiare i valori ed eseguire l’override (ovvero la riscrittura) in un secondo momento.
<link rel=”stylesheet” type=”text/css” href=”/normalize.css” />

Buon reset a tutti! :)



Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.