La magia CSS de Modernizr

  • Por
Definir estilos CSS3 para los navegadores compatibles y estilos CSS alternativos para los navegadores que no sean compatibles con las propiedades CSS3 que deseemos utilizar.
Uno de los principales usos que podremos hacer de Modernizr es definir estilos CSS3 con compatibilidad para todos los navegadores. Bueno, no nos engañemos, si un navegador no es compatible con CSS3, Modernizr no va a hacer milagros, pero al menos puede ayudarnos a definir estilos alternativos. Lo que sin duda será interesante es olvidarse de los hacks CSS, cuyo uso se desaconseja en la mayoría de los casos, pero sobre todo, poder utilizar las nuevas características de las CSS3 ya mismo y sin necesidad de preocuparnos si el navegador entenderá o no nuestras declaraciones de estilos.

Para comenzar, tendremos que haber incluido el script Javascript con las librerías de Modernizr, algo que ya aprendimos en el artículo Primeros pasos con Modernizr, publicado anteriormente en el Manual de Modernizr.

Clases CSS de Modernizr

La "magia" CSS de Modernizr se basa en la creación en línea de una serie de clases CSS. Modernizr se encargará de crear esas clases y colocarlas en la etiqueta BODY de la página. Todo el proceso es automático y la creación de cada una de esas clases se realizará únicamente en caso de que el navegador sea compatible con cada una de las características de CSS3.

Por ejemplo, pensemos que hemos hecho un "build" de Modernizr para detectar la compatibilidad o no con un par de atributos CSS3, por ejemplo los bordes redondeados y los fondos múltiples.

Nota: Como se explicó en el artículo Primeros pasos con Modernizr, podemos hacer una descarga para entornos en producción con únicamente las características de CSS3 y HTML5 que deseemos detectar. En el caso de la versión para descarga de Modernizr en ambientes en desarrollo, existirá soporte para detectar todas las características de HTML5 y CSS3 posibles en las librerías.

Si el navegador del visitante es compatible con esas dos características de las CSS3, se crearán un par de clases en la etiqueta BODY. Es decir, nuestra etiqueta que antes era así:

<body>

Pasará a tener dos clases CSS, como estas:

<body class="borderradius multiplebgs">

Nota: Insistimos en que esas clases se colocarán dinámicamente por medio de las librerías Javascript de Modernizr, en el caso que el navegador sea compatible con esas funcionalidades. Nosotros tendremos la etiqueta BODY sin ninguna clase en el código HTML y será Javascript el encargado de colocar las class de CSS. Si el navegador es solamente compatible con una de las funcionalidades, solo se aplicará esa clase que se está soportando.

En la documentación de Modernizr podemos ver una lista completa de las clases CSS que se generarán en la etiqueta BODY cuando el navegador soporte cada característica de las que se puede detectar con estas librerías.

Cómo utilizar las clases CSS de Modernizr para definir estilos compatibles

Ahora que conocemos la infraestructura de clases que nos proporcionará Modernizr, podemos pasar a ver cómo aplicar estilos CSS3 para todos los navegadores compatibles y además, estilos alternativos para los navegadores que no lo sean.

Nuestro objetivo es aplicar sombra con CSS3 en los navegadores que lo permitan y emular ese sombreado por medio de estilos CSS clásicos en los navegadores que no soporten el atributo box-shadow.

Primero veamos una simple capa con una etiqueta DIV de HTML:

<div id="micaja">
      Esta caja tendrá sombra.
</div>

Ahora podemos aplicarle estilos CSS que serían comunes para todos los navegadores, tanto los que soporten el atributo box-shadow como a los que no.

#micaja{
   border-left: 1px solid #ccc;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #666;
   border-right: 1px solid #666;
   padding: 10px;
}

En el caso anterior se han colocado estilos CSS convencionales, que entienden todos los navegadores.

Ahora, utilizando Modernizr, si nuestro navegador era compatible con el atributo box-shadow de CSS, se habrá colocado la clase "boxshadow" al BODY. Nosotros podemos utilizar dicha clase CSS para aplicar estilos que sabemos que solo acabarán afectando a los navegadores que soporten el atributo box-shadow.

.boxshadow #micaja{
   border: 1px solid #ccc;
   -webkit-box-shadow: #999 3px 3px 3px;
   -moz-box-shadow: #999 3px 3px 3px;
   box-shadow: #999 3px 3px 3px;
}

Como se puede ver, hemos sobreescrito la regla CSS para el borde y además hemos aplicado varios atributos box-shadow (uno para los navegadores basados en Mozilla, otro para los basados en Webkit y box-shadow a secas para todos los navegadores cuando soporten el atributo nativo de CSS3).

El efecto conseguido es que los navegadores modernos, que entendían el atributo box-shadow, mostrarán una sombra CSS3 y los más antiguos al menos mostrarán unos estilos para los que sí son compatibles.

Puedes ver este ejemplo en marcha en este enlace.

En el siguiente artículo veremos cómo detectar la compatibilidad con la regla @font-face de Modernizr.