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:
- Controllare se una certa proprietà esiste in un oggetto globale come
document
oppurenavigator
- Creare un elemento e poi controllare se su tale elemento una certa proprietà esiste
- Creare un elemento, controllare se un metodo esiste su tale elemento, chiamare il metodo e controllare il valore che ritorna
- Creare un elemento, assegnare ad una proprietà un certo valore e infine controllare se tale valore viene mantenuto
function supports_geolocation() {
return !!navigator.geolocation;
}
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.
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.
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