Modernizr JS, controllare la compatibilità HTML5/CSS3

Se proprio vogliamo andare a trovare qualche problema nell' HTML5 potrebbe essere la compatibilità di questo linguaggio con browser datati, però ricordatevi che fondamentalmente la colpa non è vostra, ma di chi non tiene il proprio software aggiornato!

Per risolvere i problemi derivati dall’utilizzo di caratteristiche avanzate in browser datati è stata sviluppata una libreria JavaScript che vi permetterà di sapere, sia utilizzando i CSS che direttamente in JS, se il browser che ha caricato la vostra pagina supporta o meno i diversi moduli di HTML5.

Prima di andare ad analizzare la libreria Modernizr, vorrei parlarvi di un’altrettanto interessante libreria JS che vi permetterà di creare gli elementi semantici che abbiamo incontrato precedentemente.

Chi di noi sviluppa siti web da diversi anni, saprà sicuramente di tutti i problemi legati allo sviluppo su IE, ma una delle cose più noiose che incontreremo quando vogliamo sviluppare con HTML5 è che questo browser, fino alla versione 9, non riconosce i nuovi elementi semantici.

Non riconoscendoli, IE andrà a creare questi componenti con la proprietà CSS display: inline. Per risolvere questo problema è stata inventata una libreria JS che prende il nome di html5shiv, e per sfruttarla tutto ciò che dobbiamo fare è scaricare tale libreria a questo indirizzo e inserire all’interno dell’elemento head quanto segue:

Ovviamente dovrete sostituire percorso/js/ con il vero percorso al vostro file JS, ma questo è tutto quello che dovrete fare per far funzionare la libreria!

I passi che dovremo fare per installare Modernizr sono molto simili a quelli eseguiti per durante l'installazione di html5shiv: per prima cosa scarichiamo il file JS da questo sito e poi andiamo ad inserirlo all’interno del nostro head, esattamente come abbiamo fatto per html5shiv.

Come prima, la cosa importante a questo punto è specificare con cura il percorso al file JS ma, una volta fatto questo, sarete pronti a beneficiare degli strumenti che questa libreria è in grado di offrirci.

La prima cosa che farà questa libreria sarà quella di andare a popolare l’elemento html con un gran numero di classi. Queste classi ci permetteranno di capire al volo quali caratteristiche il browser è in grado di supportare.

Come sappiamo, HTML5 non risulta essere un unico grande linguaggio ma, piuttosto, è un insieme di moduli che collaborano l’uno con l’altro per realizzare le nostre pagine web. Per questo motivo Modernizr ci fornirà un gran numero di classi CSS, pertanto quando ad esempio troviamo la classe canvas significa che il browser in questione supporta l'elemento canvas stesso, altrimenti avremmo trovato la classe no-canvas.

Non è mio interesse andare ad analizzare tutte le classi CSS che Modernizr è in grado di generare, anche perchè alla fine dipenderà tutto dal vostro tipo di progetto, ma prima di concludere la lezione vorrei mostrarvi come sia possibile andare a controllare con JS se un dato modulo è supportato dal browser:

Queste poche righe di codice servono a controllare tramite JavaScript se l'elemento canvas è supportato dal browser in uso, dandoci così la possibilità di scrivere un codice compatibile, o comunque permettendoci di avvisare l'utente dell'eventuale problema e magari invitarlo ad aggiornare il suo browser :)

Se scegliete di utilizzare questa libreria non avrete neanche bisogno di scaricare ed includere la sopracitata html5shiv in quanto già compreso nel pacchetto di Modernizr!