August 4, 2010

Detectar soporte HTML5 con Modernizr

Modernizr es una biblioteca de funciones que permite detectar el soporte nativo de nuevas y futuras tecnologías en los navegadores web. Dichas tecnologías son implementaciones de las especificaciones de HTML5 y CSS3.

El principal objetivo de Modernizr es proveer una forma confiable de detectar estas implementaciones, para poder sacar provecho de los navegadores o bien proveer una alternativa en caso de que el navegador no implemente la tecnología en cuestión.

Para usarlo simplemente basta con descargar el archivo Javascript y cargarlo desde una página. Automáticamente Modernizr realiza las pruebas correspondientes para detectar las capacidades del navegador y las almacena en forma de booleano en un objeto llamado “Modernizr”, al que podemos acceder dentro de nuestro Javascript.

Por ejemplo, para saber si el navegador soporta la etiqueta <video>, debemos chequear:

if(Modernizr.video){
//código HTML5
}
else{
//código alternativo
}

Al momento de la detección, Modernizr también agrega a la etiqueta <html> clases según las capacidades de nuestro navegador. Por ejemplo, si soporta video, audio y canvas, la etiqueta pasa a ser <html class="audio canvas video">.

Por lo tanto, otro método válido para chequear si el navegador soporta cierta implementación es ver si dicha etiqueta posee la clase correspondiente, acorde a la documentación de Modernizr.

En el ejemplo utilizo este último método para hacer la comprobación.

Demo: HTML5 Tester

Links