Modernizr

4 Dic

Out Of Date Warning

Questo post è stato pubblicato più di 2 anni fa (il 4 dicembre 2011). Le idee vanno avanti velocemente, le prospettive cambiano quindi i contenuti potrebbero non essere aggiornati. Ti prego di tenere in considerazione questo, e di verificare le informazioni tecniche presenti nell'articolo prima di farne affidamento per i tuoi scopi.

Ormai i nuovi standard HTML5 e CSS3 iniziano a comparire sempre più diffusamente sui siti web. Tuttavia al momento sono supportati soltanto dai nuovi browsers (ed a volte, anche questi, vedi IE9 non vi danno pieno supporto).
Prendiamo per esempio HTML5, ci si potrebbe chiedere: come è possibile iniziale ad utilizzarlo se i vecchi browsers ancora non lo supportano? Prima di tutto un po’ di chiarezza, HTML5 non è un oggetto unico, ma è una collezione di caratteristiche individuali. Quindi è errato parlare di supporto o non supporto ad HTML5, anche se molto spesso viene fatto (come in questo articolo) per comodità. E’ possibile invece parlare di supporto per caratteristiche individuali, come canvas, video etc..
Modernizr è una libreria JavaScript open source che ci permette appunto di rilevare il supporto per molte caratteristiche HTML5 e CSS3. Molto semplicemente, la libreria ci dirà se il browser attuale ha una determinata caratteristica nativamente implementata o meno attraverso la feature detection.

Browser detection vs Feature detection

Prima di continuare ritengo doverosa una precisazione, la tecnica di rilevamento del browser (browser detection) dovrebbe essere sempre evitata. Il rilevamento del browser potrebbe sembrare, a prima vista, come un modo logico per affrontare le differenze tra i browsers. Tuttavia si presenta pieno di insidie e problemi.
Ormai esiste una notevole eterogeneità di utilizzo dei browser, forse prima si poteva pensare di testare se era Internet Explorer o Firefox. Ma perché escludere il numero crescente di utenti di Safari? E che dire su Opera e soprattutto di Chrome di Google che acquista ogni giorno fette di mercato? Inoltre, ci sono alcuni browsers di nicchia, ma non irrilevanti, che condividono capacità con i browser più popolari. E questo senza nemmeno considerare le differenze tra le versioni IE6 (cambiatelo!!!!!), IE7 (idem!!!), IE8 e IE9 per esempio.
Inoltre cosa succede se una successiva versione del browser corregge un eventuale bug o mancato supporto? E’ chiaro che se usiamo la tecnica del rilevamento browser non risolviamo il problema.
Infine un’altro elemento a svantaggio del rilevamento del browser (o sniffing, come è a volte chiamato) è che è sempre più difficile sapere chi è chi. I browsers si identificano con un’intestazione conosciuta come la stringa user agent. Analizzare questa stringa non è per deboli di cuore.
Un oggetto JavaScript denominato navigator ci dà uno sguardo parziale sulle informazioni user agent, ma anche lui ha delle differenze tra i browsers. Abbiamo quindi bisogno di fare un rilevamento browser al fine di fare il rilevamento browser! Fermiamo la follia!
L’unico motivo che ci può indurre al rilevamento del browser è che in base a questo possiamo capire quali capacità e caratteristiche possiamo usare giusto?. Allora perché non capire direttamente quali sono le caratteristiche supportate invece di cercare di dedurle attraverso l’identificazione del browser? La tecnica nota come l’individuazione delle caratteristiche (feature detection) consente di fare proprio questo, si testa in pratica se certi oggetti, proprietà o metodi esistono.
La feature detection è di gran lunga superiore alla browser detection. E’ più affidabile, e non blocca involontariamente i browsers che supportano le capacità che stiamo testando perché semplicemente non conosciamo le caratteristiche di quel browser, o addirittura il browser stesso.

Installazione

La libreria sarà eseguita automaticamente basta scaricarla qua: www.modernizr.com, ed inserire la chiamata allo script nell’<head> della pagina:

Feature detection

Aggiungiamo poi la classe no-js nel tag <html>:

Una volta eseguita la pagina e quindi lo script, Modernizr modificherà la classe in js, se JavaScript è abilitato, inoltre aggiungerà tante classi quante caratteristiche individuerà, prefissandole con no- nel caso il browser non supporti la caratteristica.
Questo è il risultato che ho ottenuto con Chrome versione 15.0:

mentre questo con IE8:

Inoltre la libreria crea un oggetto globale chiamato Modernizr che contiene un set di proprietà Booleane per ogni caratteristica rilevata. Per esempio se il browser supporta le API canvas, la proprietà Modernizr.canvas sarà true:

Una scorciatoia per eseguire la rilevazione del supporto la possiamo ottenere attraverso questa pagina: haz.io, che utilizza proprio la libreria per eseguire i test.

Sostituzione degli stili

Tuttavia l’utilità di Modernizr non si ferma qua. Pensiamo ai nostro fogli di stile, se uno browser non supporta una proprietà inserita all’interno di una regola, semplicemente la ignorerà. Questo è il comportamento normale ed in fin dei conti non è neanche tanto negativo visto che non sarà sollevato nessun errore od eccezione. Modernizr ci offre però qualcosa che non può essere ottenuta senza di lei: la possibilità di modificare le proprietà che il browser non supporta, solo a condizione che supporti qualche altra proprietà.
Supponiamo che vogliamo sfruttare la possibilità offertaci dai CSS di inserire background multipli, nel nostro esempio vogliamo inserire due immagini di sfondo una in alto ed una in basso. Peccato che non tutti i browser supportino questa caratteristica (vedi IE8 e precedenti):

Applicando la regola in questo, modo avremo dei problemi in quanto i browsers che non supportano background multipli ignoreranno la regola in toto, invece noi verremo che in quel caso fosse visualizzata l’immagine superiore. Utilizzando la libreria possiamo invece scrivere:

In questo caso se il browser supporta i background multipli verrà applicata anche la seconda regola.
Supponiamo ora che se il browser supporta la proprietà box-shadow sul nostro box vogliamo inserire un’ombreggiatura su tutti i lati, non applicando nessun bordo in caso contrario vogliamo applicare un semplice bordo di 1 pixel.

In questo caso Modernizr ci permette, di eliminare i bordi nei browsers che supportano l’ombreggiatura ottenendo sicuramente un risultato estetico migliore.
Vediamo ora un’altro esempio utilizzo della libreria con i CSS:

In questo caso sarà applicata o la prima o la seconda regola, a seconda se il browser supporti o meno la proprietà box-shadow.

HTML5

Modernizr ci permette inoltre di utilizzare i nuovi elementi HTML5 <header>, <footer>, <aside>, <section>, <video> etc. su browsers che non li supportano. Attenzione questo non significa che elementi come <video> o <canavas> inizieranno magicamente a funzionare su IE8 per esempio, ma ci permetterà di poterli stilizzare senza che siano ignorati.

Risorse

www.modernizr.com
haz.io

Lascia un commento