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.
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 and CSS test</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
Feature detection
Aggiungiamo poi la classe no-js nel tag <html>:
<html class="no-js">
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:
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
mentre questo con IE8:
<HTML class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent no-video no-audio no-localstorage no-sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths">
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:
if (Modernizr.canvas) {
// buona notizia; supporto canvas disponibile!
} else {
// Nessun supporto canvas nativo disponibile!
}
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):
#content {
background: url('img/bg_top.jpg') top left repeat-x,
url('img/bg_bottom.jpg') bottom left repeat-x;
}
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:
#content {
background: url('img/bg_top.jpg') top left repeat-x;
}
.multiplebgs #content {
background: url('img/bg_top.jpg') top left repeat-x,
url('img/bg_bottom.jpg') bottom left repeat-x;
}
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.
.box {
border: 1px solid #888;
}
.boxshadow div.box {
border: none;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}
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:
.boxshadow div{
border: none;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}
.no-boxshadow div{
border: 1px solid #888;
}
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.