Come eseguire il reset del CSS del browser e vivere felici

Scritto da Andrea | 30.04.2007

Non ho ben chiaro se si tratti di una novità o meno, ma in questi giorni in Rete si fa un gran parlare delle tecniche di azzeramento dei predefiniti dei vari browser. Prima di capirne i vantaggi, diamone una rapida spiegazione.

La C dell’acronimo (che sta per cascading) indica che la tecnologia di gestione della presentazione preferita dai webdesigner viene applicata ai contenuti web secondo una logica di priorità successive. Le regole definite dal foglio di stile esterno (la situazione più comune, a oggi) possono essere annullate dai fogli di stile interni (quelli specificati nella parte <head> del documento xhtml), i quali a loro volta devono cedere spazio (se specificati) ai cosiddetti stili “in linea”, che vengono indicati tramite l’attributo “style” (applicabile a qualsiasi elemento XHTML). Facciamo un esempio?

  1. se nel css esterno ho p {color: red;}
  2. se nel css interno ho p {color: blue}
  3. se in linea ho “<p style=”color: black”>

Data questa logica, il mio paragrafo sarà di colore nero, perché lo stile in linea vince su quello interno che, a sua volta vince su quello esterno.

Inoltre i CSS mettono a disposizione la clausola “!important”, da applicare in coda a qualsiasi proprietà di un CSS esterno o interno, che fa salire la priorità di quella proprietà in particolare. In pratica se nel foglio di stile esterno mettessi p {color: red !important;}… il testo sarà comunque rosso, a prescindere dal cosa accada nelle istruzioni interne o in linea (a meno che in quelle interne non ci sia un altro !important, ovviamente).

Semplice? Certo. Ma c’è un fantasma che si aggira tra i nostri tentativi di ottenere una presentazione omogenea cross-browser.

Infatti esiste un foglio di stile di grado “zero”, le cui istruzioni hanno priorità molto bassa, che è caricato dal per ogni pagina web. Se infatti creiamo una pagina con un po’ di testo e la visualizziamo, per esempio, in Firefox, tale testo sarà scritto in carattere Times New Roman. Perché non è Verdana? Perché il CSS di default di Firefox prevede che il font-family di default sia il times.

Questo CSS è del resto molto importante per questioni di accessibilità: l’utente, infatti, potrebbe configurare il browser in modo tale che il foglio di stile del browser abbia una priorità elevatissima, di fatto sovrascrivendo le regole definite dall’autore della pagina. In questo modo, per esempio, è possibile applicare a tutti i siti visitati un foglio di stile ad alto contrasto o con le dimensioni del carattere molto grandi per migliorarne la leggibilità.

Però c’è un “però”.

In questo CSS vengono anche definite delle regole di altro tipo, come le dimensioni dei margini di titoli, liste, paragrafi ecc. Il problema è che ogni produttore di browser definisce un po’ a modo suo queste distanze. Pertanto, se l’autore del foglio di stile non va a sovrascriverle nelle proprie istruzioni, queste verranno ereditate comunque dalla pagina. La conseguenza maggiore consiste nella difficoltà, al momento della redazione del proprio CSS, di scrivere istruzioni che aggiustino queste dimensioni in modo corretto e uniforme per i vari browser. Un qualcosa che fa desiderare ardentemente di applicare qualche hack o workaround per ottenere l’omogeneità sperata.

Come dicevo a inizio articolo, questa situazione può essere prevenuta inserendo nella propria pagina il riferimento a un CSS in grado di azzerare tutte queste proprietà gestite differentemente dai vari browser. Un semplice CSS che, metaforicamente, corrisponde all’azione dello spianare il terreno prima di poter edificare la nostra architettura di pagina.

Esempi di questi CSS possono essere trovati presso:

Personalmente uso il foglio di stile di Yahoo, ma sono curioso di capire se non ci sia qualcosa di meglio in giro…

Come si utilizza questo approccio? Anche in questo caso è tutto molto semplice. Basta includere il foglio di stile di reset prima del proprio CSS per fare in modo che esso annulli quello del browser senza intaccare il nostro successivo lavoro (che potrà anche sovrascriverne alcune proprietà!). In pratica:


<style type="text/css">
<!--
@import url("style/reset.css");
@import url("style/front.css");
-->
</style type="text/css">

Tutto chiaro?

Argomenti: Accessibilità, Tecnologie web |

Commenti a questo articolo

Devi essere un utente registrato per lasciare un commento.