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.

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.