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)