Open Source | Strumenti

Modernizr: la libreria per conoscere le features HTML5/CSS3 supportate dal tuo browser

ottobre 24, 2011 by Giuseppe Maldarizzi | 0 Commenti

Abbiamo più volte affrontato il tema HTML5 e CSS3 che sono, e continueranno ad essere, il punto di riferimento fondamentale per chi lavora con il web su tutti i tipi di dispositivi.

Essendo una tecnologia in continua evoluzione, i broswer web non riescono ad implementare tutte le features in una sola release e, per chi sviluppa, la domanda è sempre la stessa: "ma funzionerà su tutti i browser?".

Dando per scontato il concetto che l'utente finale deve essere sempre aggiornare il suo software e non viceversa (ci sono clienti che chiedono ancora la compatibilità con IE6!), esiste una libreria open source scritta in javascript che può aiutarci a capire se la feature HTML5 e CSS3 che vogliamo utilizzare è supportata dal browser corrente: si tratta di Modernizr.

Questa utilissima libreria infatti ci facilita il lavoro di gestione delle compatibilità tra le varie versioni di browser attraverso una semplice verifica via javascript.

Come funziona

Prima di tutto bisogna scaricare la libreria dal sito scegliendo, attraverso un configuratore, le api da importare. Poi è necessario solo integrarla nel nostro progetto come un qualsiasi file js tra i tag <head></head>.

Se per esempio volessimo usare l'evento Touch fornito da HTML5 (non dobbiamo dare per scontato che tutti i dispositivi mobile lo supportano!) possiamo verificarlo in questo modo:

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

Il sito contiene una ricca documentazione con diversi esempi applicativi.

La libreria nel giro di un anno ha già conquistato i big del web come Twitter, Google, Microsoft e tanti altri che la utilizzano nelle loro applicazioni.

Quando un'idea è valida - ed open source - il successo è assicurato!