Cómo Detectar Si El Navegador Soporta HTML5 (Y CSS3)

Si bien la mayoría de los navegadores modernos (Chrome, Safari, Firefox, Opera, IE9) ya soportan gran cantidad de las nuevas funcionalidades del HTML5, todavía hay varios de ellos (justamente los más usados) que todavía no lo hacen. El problema que surge aquí es como saber si el navegador que está utilizando el usuario de nuestro sitio soporta video, canvas,localStorage, etc.

Es aquí donde entra Modernizr, una librería javascript que nos permite detectar el soporte a varias de las nuevas características que brindan el HTML5 y el CSS3.

Usando Modernizr para detectar HTML5 y CSS3

Su utilización es bastante simple.
Primero debemos descargar el archivo js desde el sitio de Modernizr. Luego de subir el mismo a nuestro sitio, incluímos la librería en el head:

<script src="modernizr.min.js"></script>

No es necesario llamar a ninguna función para que Modernizr comience, ya que se inicia automáticamente, creando el objeto Modernizr, el cual tiene muchas propiedades de tipoboolean (verdadero o falso), cada una de ellas corresponde a una de las propiedades que se pueden detectar.

Por ejemplo, si queremos detectar si el navegador soporta el elemento video, debemos escribir el siguiente código javascript:

if (Modernizr.video) {
  // el navegador del usuario soporta el elemento video
} else {
  // el navegador no soporta video
  //(una solución alternativa podría ser usar Flash)
}

Para detectar el elemento canvas:

if (Modernizr.canvas) {
  // el navegador soporta canvas
} else {
  // no hay soporte para canvas
}

Estos son solo algunos ejemplos, como dije anteriormente, con Modernizr podemos detectar tanto funcionalidades de HTML5 como de CSS3.

Para más información: Modernizr