Modernizr es una librería Javascript que nos va a ayudar con la detección del soporte de capacidades HTML5 y CSS3 de un navegador. Si vamos a utilizar HTML5 o CSS3 en nuestra página web, Modernizr nos va a indicar cuales de los elementos o funcionalidades de estos lenguajes están disponibles en el navegador web que está cargando nuestra página.
Lo primero que tenemos que hacer es ir a la web de Modernizr y descargarnos la librería. Hay que indicar que tenemos una versión para desarrollo y una versión para producción la cual es parametrizable. Para las pruebas puedes utilizar la primera, ya que es la que trae todas las funcionalidades de Modernizr.
Una vez tenemos la librería, tenemos que incluirla en nuestra página, mediante una carga normal de un script:
Ahora ya pasamos a preguntar por capacidades HTML5 y CSS3. Por ejemplo, si queremos saber si el navegador tiene soporte para el elemento Canvas pondremos lo siguiente:
if (Modernizr.canvas)
document.write("SI que existe soporte de canvas
");
else
document.write("NO existe soporte de canvas
");
Vemos que la variable Modernizr.canvas es la que nos devuelve un true o un false dependiendo de si hay soporte en el navegador o no.
Otra de las variables nos permite conocer si hay soporte del elemento vídeo. En este caso es la variable Modernizr.video. Y el código a utilizar, similar al anterior:
var video = (Modernizr.video)?true:false;
if (video) document.write("Si se soporta el elemento vídeo");
Lo mismo pasa con las capacidades de CSS3. Por ejemplo, si queremos saber si el navegador soporta las animaciones de CSS3, podemos preguntar por el atributo Modernizr.cssanimations.
var cssanimations = (Modernizr.cssanimations)?true:false;
if (cssanimations)
document.write("SI se soporta las animaciones CSS3
");
else
document.write("NO se soporta animaciones CSS3
");
Así ya tendremos nuestra librería Modernizr cargada y lista para utilizar detectando las capacidades HTML5 y CSS3.
