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