HTML5 : come utilizzare solo le proprietà supportate dal browser

Come ben spiegato nel libro (che consiglio di leggere per chi non l’ha ancora fatto) l’HTML5 non è un blocco monolitico, bensì è una collezione di singole proprietà che un poco alla volta tutti i browser stanno arrivando a supportare.
Non è quindi sufficiente, né sarebbe possibile, controllare se un browser può visualizzare una pagina in HTML5 oppure no, ciò che dobbiamo controllare è che la specifica feature che vogliamo utilizzare sia implementata dal browser che deve visualizzare la pagina.

Possiamo rintracciare 4 tipologie di controlli da poter utilizzare:

1. Controllare se una certa proprietà esiste in un oggetto globale come document oppure navigator


function supports_geolocation() {
return !!navigator.geolocation;
}


2. Creare un elemento e poi controllare se su tale elemento una certa proprietà esiste


function supports_canvas() {
return !!document.createElement('canvas').getContext;
}


È utile ricordare che l’elemento canvas non verrà mai inserito nella pagina finché non verrà chiamata una funzione di “append” che lo posizioni all’interno del DOM. Ma per eseguire il test ciò non è necessario.

3. Creare un elemento, controllare se un metodo esiste su tale elemento, chiamare il metodo e controllare il valore che ritorna


function supports_video() {
return !!document.createElement('video').canPlayType;
}
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

È bene sottolineare come in questo specifico caso non dovremo attenderci un risultato vero/falso, bensì riceveremo in ritorno una di queste 3 opzioni: “Probably”, “Maybe”, “”. La stringa vuota indica il mancato supporto.
E’ comprensibile che non ci possa essere data la certezza assoluta sulla visualizzazione di un video, nel quale entrano in gioco variabili particolarmente complesse.

4. Creare un elemento, assegnare ad una proprietà un certo valore e infine controllare se tale valore viene mantenuto


function supports_new_input_types() {
var i = document.createElement("input");
i.setAttribute("type", "search");
return i.type !== "text";
}


Al posto di “search” può essere inserito uno dei nuovi input type di HTML5: search, number, range, color, tel, url, email, date, month, week, time, datetime, datetime-local