CHIARA SALVATORE

Cloud Infrastructure Administrator

Devops Engineer

LinkedIn  Twitter  Delicious  profilo Facebook solo per conoscenti

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

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

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

  4. 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.

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

  6. 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.

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

  8. 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

Post correlati

Posted in Resources | Tagged , , | Leave a comment

Leave a Reply

“Ci sono solo due giorni all'anno in cui non puoi fare niente: uno si chiama ieri, l'altro si chiama domani, perciò oggi è il giorno giusto per amare, credere, fare e, principalmente, vivere.”
 Dalai Lama