Progettazione cross-browser: CSS Reset di Yahoo UI Library

Webaccessibile.org
La risorsa italiana di IWA dedicata all'accessibilita' del Web
http://www.webaccessibile.org
Progettazione cross-browser: CSS Reset di Yahoo UI
Library
Pubblicato da Fabrizio Caccavello il giorno 28 aprile 2009
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
1/5
Webaccessibile.org
La risorsa italiana di IWA dedicata all'accessibilita' del Web
http://www.webaccessibile.org
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
2/5
Webaccessibile.org
La risorsa italiana di IWA dedicata all'accessibilita' del Web
http://www.webaccessibile.org
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.
Potrebbero interessarti anche i seguenti articoli
Traduzioni WebAIM
WebAIM.Org - http://www.webaim.org - è un progetto sviluppato dal “Center for Persons with Disabilities (CPD)” dell’Universita di
Stato dello Utah. Il CPD &...
2003 Anno Europeo del Disabile
Era dal 1981 che il Consiglio Europeo non proponeva di dedicare un intero anno per sostenere ed aiutare i disabili; dati recenti
affermano che in Europa ci sono oltre 37 mil...
3/5
Webaccessibile.org
La risorsa italiana di IWA dedicata all'accessibilita' del Web
http://www.webaccessibile.org
Effettuare test con diversi browser e diversi OS
Analizziamo una serie di strumenti utili al supporto dello sviluppatore per le fasi di test di compatibilità dei siti Web sia sotto l'aspetto
informativo che sotto l'aspetto funzi...
Scrivere una policy tecnica sull’accessibilità dei contenuti
L'importanza di una policy chiara e completa sugli aspetti tecnici dell'accessibilit? che sono stati seguiti durante la creazione di un
sito Internet ? fuori discussione. Prima ...
Scrivere testi alternativi per le immagini
Troverai l'articolo originale in lingua inglese su http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/image-alttext2.shtml Chiunque abbia una qualche conosc...
4/5
Webaccessibile.org
La risorsa italiana di IWA dedicata all'accessibilita' del Web
http://www.webaccessibile.org
5/5
Powered by TCPDF (www.tcpdf.org)