Cómo detectar las capacidades de navegadores con Javascript y Modernizr

  • Por
Explicamos cómo detectar si un navegador navegadores da soporte a las distintas funcionalidades de CSS3 y HTML, con Javascript y Modernizr.
Llegado a este punto en el Manual de Modernizr seguramente estemos interesados en comenzar a utilizar las librerías para detectar la compatibilidad con CSS3 y HTML5 o dicho de otra manera, poner manos en el código fuente para comenzar a entender de verdad cómo funciona Modernizr.

En el capítulo anterior explicamos cuáles eran los primeros pasos para incluir las librerías en una página web. Así que ahora podemos comenzar a usar Modernizr. Lo que vamos a hacer a continuación es básicamente un primer script Javascript que acceda al objeto Modernizr y nos diga si están o no presentes algunas funcionalidades en nuestro navegador.

Objeto Javascript Modernizr

Cuando tenemos Modernizr cargado en nuestra página, se crea automáticamente un objeto Javascript que tiene una serie de propiedades que nos informan sobre si están o no disponibles cada una de las funcionalidades presentes en CSS3 y HTML5. Las mencionadas propiedades contienen simplemente valores boleanos (verdadero o falso) que podemos evaluar para saber si están o no cada una de las funcionalidades que deseemos detectar.

El uso es tan sencillo como esto:

if (Modernizr.boxshadow){
   alert("SI sombra caja");
}
else{
   alert("NO sombra caja");
}

Como hemos visto, se está evaluando Modernizr.boxshadow (la propiedad boxshadow del objeto Modernizr) y estamos mostrando un mensaje en caso positivo y otro en caso negativo.

La propiedad boxshadow nos indica si el navegador es compatible con el atributo box-shadow de CSS3, que sirve para crear cajas de contenido con sombreado.

Ahora veamos otro ejemplo similar que detectaría si está disponible el elemento Canvas del HTML 5.

if (Modernizr.canvas){
   alert("SI canvas");
}
else{
   alert("NO canvas");
}

De un modo parecido al anterior, en este script estamos evaluando Modernizr.canvas, que nos dará positivo en caso que el navegador sea compatible con canvas y negativo en caso contrario.

Podemos ver esos dos scripts en marcha en una página aparte.

Está claro que no sirve de mucho mostrar un mensaje de alerta indicando la compatibilidad o no, pero basados en esta comprobación podremos hacer diferentes acciones para unos navegadores y otros. Por ejemplo en caso que no sea compatible un navegador, podríamos cargar un "pollyfill" que amplíe las posibilidades del navegador del cliente. Todo eso lo veremos en este mismo manual un poco más adelante.

Nota: Si quieres ir abriendo boca acerca de los pollyfills que podríamos invocar para ampliar las capacidades del navegador que está visitando la página, te recomiendo acceder a está página que nos muestra un listado de los Pollyfills para compatibilidad con HTML5.

Nosotros aquí te hemos mostrado simplemente un par de propiedades del objeto Modernizr, pero lógicamente existen muchas más. El listado completo de propiedades del objeto para la detección de funcionalidades HTML5 y CSS3 se puede encontrar en la propia documentación de Modernizr.

Recuerda además que debes tener un paquete de las librerías que incluya la detección con todas aquellas propiedades que piensas utilizar. La descarga indicada para desarrollo de las librerías incluye todas las propiedades y podemos crear un "build" para producción con únicamente las propiedades que deseemos utilizar. Todo eso ya se explicó en el artículo Primeros pasos con Modernizr.

De momento dejaremos Javascript de lado, ya que en el próximo artículo explicaremos cómo podemos usar las clases CSS de Modernizr para aplicar estilos CSS3 en navegadores que sean compatibles.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Carlos Rios

06/12/2011
Modernizr
Hola, estuve viendo esta página de su tutorial en ei8 pero no detecta los modernizr que debería hacer en ese caso. Mi gracias por su ayuda.

http://www.desarrolloweb.com/articulos/ejemplos/modernizr/probando-modernizr.html