Browser, questo (s)conosciuto! So just Modernizr!

Browser, questo (s)conosciuto! So just Modernizr!

by admin gennaio 28, 2011

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 headerfootersectiondialog 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: TwitterBurger 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?

Social Shares

Iscriviti per rimanere in contatto con me!

Niente spam, promesso!

Leave a Comment

Your email address will not be published. Required fields are marked *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.