Introduzione

Tra le migliaia di pagine web dedicate agli sviluppatori di siti internet spiccano i laboratori di sviluppo messi a disposizione dalle “top web company” che ormai sono diventi dei veri e propri punti di riferimento per gli sviluppatori di tutto il mondo. E’ il caso di Yahoo che con il suo progetto User Interface Library (YUI) fornisce una serie di validi strumenti di progettazione.

Tra le risorse disponibili c’è lo snippet CSS Reset, un utile frammento di codice CSS che permette di azzerare i default dei browser. Quella di azzerare i default dei browser è una tecnica già proposta nella YUI Library da qualche anno, anche se mi è capitato raramente di vederla applicata nei progetti web. Penso invece che sia un espediente molto utile soprattutto nell’ottica dell’accessibilità.

Una partenza cross-browser

Il punto di partenza per l’implementazione di un progetto web accessibile è senz’altro il codice (X)HTML valido, cioè conforme con gli standard stabiliti dal W3C, e preferibilmente con DTD di tipo Strict.

Ma la prima vera sfida è quella legata alla compatibilità del progetto con ogni tipo di browser, quella che in gergo viene definita programmazione cross-browser (programmazione non legata a uno specifico browser), o talvolta per essere meno rigorosi, multi-browser (programmazione che tiene conto di molti browser).

CSS Reset, lo snippet di cui stiamo parlando, è un valido aiuto in questo senso, perché permette di inizializzare un progetto partendo veramente da zero, cioè eliminando tutte quelle impostazioni di base, diverse da browser a browser, che talvolta fanno impazzire anche gli sviluppatori più esperti, alla ricerca di un rendering comune tra i vari browser.

Margin, padding, text-align, font-size, ecc. tutto parte da zero, solo testo puro senza alcuna interazione da parte delle impostazioni di base del browser utilizzato.

Questo permette allo sviluppatore di reimpostare i parametri a proprio piacere nella certezza che da questo punto in avanti ogni istruzione sarà esattamente quella impostata nel foglio di stile.

Una questione di stile

Questa tecnica, se ben assimilata, permette di scrivere dei fogli di stile più lineari, con meno istruzioni ridondanti come ad esempio le decine di margin:0; padding:0 che di solito si è costretti a digitare per annullare le diverse interpretazioni della marginazione e dei padding in una moltitudine di elementi come div,dl,dt,dd,ul,ol,li,h1,h2,h3, ecc.

Un foglio di stile più snello diventa di più facile manutenzione e più affidabile. Con meno istruzioni CSS diventano più rapide e sicure le procedure di test sui vari browser e più rapidi gli interventi risolutivi.

CSS Reset all’opera

In questa pagina si può vedere il CSS Reset all’opera mentre questa è la stessa pagina senza alcuna istruzione CSS.

Proviamo a ricostruire un titolo h1 come in questa pagina di prova: l’istruzione CSS nel caso in cui si utilizzi l’azzeratore sarà semplicemente

h1{font-size:2em; border-bottom:solid 1px #ccc}

se invece non si utilizzasse l’azzeratore si dovrebbe scrivere

h1{font-size:2em; border-bottom:solid 1px #ccc; font-weight:normal; margin:0; padding:0}

In pratica l’operazione di reset del css di base, se non eseguita preventivamente, dovrà essere in qualche modo distribuita all’interno del codice, al momento del bisogno.

Una consapevole ricostruzione

Bisogna tenere conto però che i default CSS che un browser fornisce sono una garanzia di base: se si decide di eliminarli si dovrà poi procedere a una lenta e consapevole ricostruzione.

E’ evidente che questa tecnica può essere usata da programmatori esperti che hanno una ottima padronanza dei fogli di stile e del codice (X)HTML perché altrimenti si rischia di lasciare il progetto web con gravi lacune che possono annullare gli effetti positivi in termini di solidità del progetto.

Di standard ce n’è uno

Fra molti sviluppatori si è diffusa l’abitudine di considerare questi snippet come degli standard. Gli standard veri sono però solo quelli che la comunità scientifica internazionale riconosce come tali, e per il web, quelli rilasciati dal W3C. Questi “pezzi di codice” sono soltanto delle utilities ben fatte e ben sperimentate che i vari laboratori (in questo caso Yahoo) mettono a disposizione degli sviluppatori.

La programmazione con l’ausilio dell’azzeratore di CSS non è una tecnica che può essere definita standard. E’ soltanto una delle soluzioni possibili per dare vita a un progetto web molto solido che poi potrà diventare accessibile.