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.
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.
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">
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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...