CSS - Reset

Come detto in precedenza, i contenuti sono formattati graficamente attraverso lo strato presentazione. In altri termini, attraverso il linguaggio CSS, indichiamo ai browser come visualizzare gli elementi del documento.

Ciò che non si è detto è che con il nostro strato di presentazione in realtà andiamo a sovrascrivere uno "strato di presentazione di default" presente su ogni browser, che ha valori CSS predefiniti per ogni elemento.

Possiamo vedere gli effetti di questi valori di default scrivendo un contenuto HTML/XHTML senza CSS:

<h1>Titolo</h1>
<p>Paragrafo</p>
<ul>
   <li>Voce 1</li>
   <li>Voce 2</li>
   <li>Voce 3</li>
</ul>

Visualizzando il codice riportato su un browser qualsiasi, possiamo subito renderci conto di come l'h1 abbia un suo font-size e dei padding/margin già impostati, stessa cosa per il p o per l'ul e per tutti gli altri elementi non riportati nell'esempio.

Se proviamo a visualizzare quello stesso contenuto su browser differenti ciò che probabilmente si noterà è che questi valori di default spesso sono differenti da browser a browser.

Ciò crea non pochi problemi allo sviluppatore che deve scrivere CSS che presenti contenuti allo stesso identico modo su tutti i browser.

Ad esempio, per gli elenchi (ol e ul) alcuni browser hanno un padding-left altri un margin-left che a loro volta possono avere differenti valori.

In tutti questi casi uno sviluppatore dovrebbe affrontare queste incongruenze caso per caso.

Ad esempio, al fine di evitare distanze variabili (margin+padding) da browser a browser, uno sviluppatore dovrebbe ricordarsi sempre di impostare entrambi i valori di margin e padding.

Esistono tantissime varianti di questo tipo che obbligano lo sviluppatore a controllare continuamente il risultato di ciò che scrive su tutti i browser.

Non è rara la situazione in cui, dopo aver testato con un solo browser i CSS, ci si trova a perdere un'enormità di tempo per capire perchè la pagina si visualizza in maniera differente su altri browser

Spesso la causa è proprio dovuta a queste incongruenze sui valori di default dei browser: lavorando con un solo browser abbiamo basato i CSS su un misto tra i valori di default (che non abbiamo forzato) e i nostri valori indicati dai CSS (che hanno forzato i valori di default).

Cambiando browser molti valori di default (non forzati) possono variare cambiando così il modo in cui la pagina si visualizza. La soluzione in questi casi è andare a ricercare tutti valori di default che non abbiamo forzato ed assegnare dei valori nei nostri CSS.

Fortunatamente c'è un modo più intelligente per uscire da questa situazione ed è quella di fare un reset di tutti gli elementi prima di iniziare a scrivere i nostri CSS.

Il reset consiste nel forzare un'impostazione di default uguale per tutti i browser. In questo modo siamo sicuri che tutti i valori di default sono congruenti sin dall'inizio.

Questa operazione di reset è effettuata da altri CSS che sono disponibili in rete. Ad esempio:

http://meyerweb.com/eric/tools/css/reset/

Ovviamente il css del reset va messo prima dei nostri css.