Html5 e compatiblita’ browser. Il metodo giusto per utilizzarlo.

Quale browser sta visitando la nostra pagina web, e su quale sistema operativo è installato?

Capire chi ci visita, quale device e quale software utilizza è fondamentale quando decidiamo di implementare ed utilizzare nuove tecnologie come ad esempio HTML5 e CSS3.

In linea di massima esistono due grandi soluzioni per ovviare a questo problema: la prima, quella più diffusa e che personalmente sconsiglio è quella dell’analisi delle stringhe User Agent, e la seconda è la cosiddetta feature detection, ovvero un vero e proprio test di supporto sul singolo elemento.

Ecco un esempio di User Agent:
Mozilla/5.0 (Windows NT 5.2; rv:2.0.1) Gecko/20110101 Firefox/4.2.1

L’analisi della stringa User Agent non è la soluzione migliore in quanto per ottenere una identificazione solida occorrono script molto complessi (da rivedere all’uscita di nuove versioni dei browser) e perchè molto spesso i browser mascherano queste informazioni camuffandosi per mantenere l’anonimato.

Ben più efficace dell’identificazione del browser risulta il controllo sulle varie funzionalità mediante oggetti e funzioni.
Per realizzare questi controlli possiamo scrivere del codice JavaScript ad hoc oppure utilizzare la libreria Modernizr.

Tramite semplici controlli Modernizr ci permette di sapere se il browser supporta rgba(), border-radius, transizioni CSS eccetera.
Oltre a questo ci lascia utilizzare tag come header, footer, section, dialog eccetera senza preoccuparci di come vengano interpretati, ad esempio, in IE.

Per farsi un’idea della potenza di Modernizr ci basta sapere che è utilizzata da: Twitter, Burger King , NFL  e dallo Stato del Texas .

Per fare un esempio, se volessimo controllare se il browser supporta il tag video potremmo scrivere una cosa del genere:

if (Modernizr.video) {
   /* video supportato */
} else {
   /* video non supportato */ 
}

Bello, no?