Modernizr y las capacidades HTML5 y CSS3

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.

Descargar Modernizr

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.

Cargar Modernizr

Una vez tenemos la librería, tenemos que incluirla en nuestra página, mediante una carga normal de un script:

<script src="modernizr-2.0.6.js"></script>

Detectar capacidades HTML5

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) {
  // El navegador soporta el elemento Canvas
} else {
  // El navegador no soporta el elemento 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.

Detectar soporte de vídeo

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:

if ([Modernizr.video](http://modernizr.video/)) {
  // El navegador soporta el elemento Video
} else {
  // El navegador no soporta el elemento Video
}

Detectar capacidades CSS3

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.

if (Modernizr.cssanimations) {
  // El navegador soporta las animaciones CSS3
} else {
  // El navegador no soporta las animaciones CSS3
}

Así ya tendremos nuestra librería Modernizr cargada y lista para utilizar detectando las capacidades HTML5 y CSS3.