Progettazione cross-browser: CSS Reset di Yahoo UI Library

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.

Potrebbero interessarti anche i seguenti articoli

  • Traduzioni WebAIMTraduzioni WebAIM WebAIM.Org - http://www.webaim.org - è un progetto sviluppato dal “Center for Persons with Disabilities (CPD)” dell’Universita di Stato dello […]
  • 2003 Anno Europeo del Disabile2003 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 […]
  • Effettuare test con diversi browser e diversi OSEffettuare 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 […]
  • Scrivere una policy tecnica sull’accessibilità dei contenutiScrivere 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 […]
  • Scrivere testi alternativi per le immaginiScrivere testi alternativi per le immagini Troverai l'articolo originale in lingua inglese su http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/image-alt-text2.shtml Chiunque abbia una […]
Condividi:

Informazioni sull'autore

Fabrizio Caccavello
Fabrizio Caccavello

Web Accessibility Expert - User Experience Designer. Mi occupo di standard, accessibilità e strategie per il web, di HTML/CSS e di sviluppo di applicazioni desktop e mobile. Mi impegno nello studio della semplificazione dei layout come valore aggiunto e imprescindibile nello sviluppo di progetti accessibili e conformi agli standard.
Mi occupo di Responsive Web Design, tecnica di progettazione per il web multipiattaforma e multi device.
Consulente Super Senior in Accessibilità in Agenzia per l'Italia Digitale
Membro della commissione e-Accessibility di UNINFO e coordinatore del gruppo di lavoro "Traduzioni e adozioni"
Membro del Consiglio direttivo di IWA-Italy
Fondatore di Akebia - internet experience

Commenti

È presente 1 commento:

  1. Technotizie.it ha detto:

    Progettazione cross browser: Il CSS Reset di Yahoo UI Library…

    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 pu……

Rispondi

Link e informazioni