En este artículo vamos a detectar tres estilos CSS3 y a ofrecer estilos CSS alternativos para los navegadores que no los soporten. En concreto en los ejemplos trabajaremos con los atributos de CSS3 para hacer background múltiple (asignar varios fondos de imagen a un mismo elemento), text-shadow (hacer efectos de sombra en textos) y los relacionados con maquetación automática en columnas.

Por supuesto, ya que estamos en el Manual de Modernizr, veremos como hacerlo usando estas librerías Javascript.

Comencemos por ofrecer un link a una página que hemos realizado como ejemplo de estas propiedades. Dependiendo del navegador y la compatibilidad con las reglas de estilo utilizadas verás el ejemplo de una manera u otra.

Fondos múltiples en un mismo elemento

A partir de CSS3 podemos asignar varios fondos de tipo imagen a un mismo elemento de la página. Para ello simplemente separamos por coma cada uno de los fondos distintos que estamos asignando.

Ahora bien, si nuestro navegador no es compatible con CSS3 y ve varios fondos distintos en un mismo elemento, por muchas comas que pongamos para separarlos, no entenderá nada. El resultadó será que no nos mostrará ninguno de los fondos.

La situación, antes de Modernizr nos obligaba a colocar siempre un único fondo, que funcionará en todo caso. En caso que coloquemos varios fondos, también antes de Modernizr, nos arriesgamos a que el navegador del usuario no nos muestre ninguno.

La solución es tan fácil como usar Modernizr para detectar cuándo podemos aplicar múltiples fondos y colocar un único fondo cuando los navegadores solamente soportan uno. Para ello vamos a definir en el estilo general del elemento un único fondo.

#central{
   background: url(images/patron.png);
}

Luego, en caso que se permitan múltiples fondos, Modernizr crea una clase en la etiqueta BODY llamada "multiplebgs", que podemos utilizar para aplicar más de un fondo sin peligro que la compabilidad de nuestro navegador con lass hojas de estilo lo rechace.

.multiplebgs #central{
   background: url(images/diamante.png) no-repeat bottom right,
   url(images/patron.png);
}

Sombras en textos

A pesar que text-shadow no pertenece específicamente a CSS3, sino que fue introducido ya con la segunda versión del lenguaje, también se puede detectar con Modernizr y resultará útil porque a día de hoy todavía muchos navegadores no soportan esa regla.

En el elemento anterior habíamos colocado un fondo tirando hacia claro, que nos obligaba a escribir con una letra de color oscuro. Además quiero ponerle una sombra a mi texto, también oscura. Por ello hemos definido este estilo de manera general para los párrafos que van dentro de la capa #central.

#central p{
   color: #33c;
   text-shadow: -1px 1px 5px #006;
}

Ahora bien, texto oscuro sobre sombreado oscuro no queda demasiado bien. Me gustaría detectar en qué casos el navegador soporta sombreado, para entonces colocarle el texto claro. Texto claro sobre sombreado oscuro contrastará suficientemente.

Así que la solución pasa por usar Modernizr, y crear una regla de estilo para hacer un texto de color blanco que solo se tenga en cuenta en los navegadores que aceptan sobreado de texto. Para ello es tan sencillo como utilizar la clase "textshadow" que estará activa solamente cuando el navegador disponga de compatibilidad con sombreado de textos.

.textshadow #central p{
   color: #fff;
}

Distribución en varias columnas con CSS3

Gracias a una serie de atributos disponibles en las hojas de estilo en cascada nivel 3, se pueden agrupar los contenidos en columnas de manera automática. Es una interesante utilidad que ayudará a las páginas web a parecerse mucho más a las publicaciones impresas. El tema es que aun no está disponible en muchos navegadores, con lo que tenemos que utilizar esa característica con cuidado.

En el ejemplo de este artículo tenemos una lista que tiene varios elementos, a la que hemos aplicado estilos CSS3 para que aparezcan en varias columnas.

#milista{
   column-width: 120px;
   column-gap: 25px;
   column-rule: 2px solid #ccf;
}

Gracias a ello vemos que los elementos de la lista aparecen maquetados en varias columnas, pero en navegadores que no lo admitan aparecerían uno debajo de otro. Para emular con CSS2 la maquetación en columnas podemos utilizar el atributo float, asignarle una anchura a los elementos de la lista y un margen para hacer el espaciado entre columnas.

#milista li{
   float: left;
   width: 120px;
   margin-right: 25px;
}

Pero claro, eso provocaría que todos los navegadores hiciesen "flotar" los elementos a la izquierda. Para evitarlo podemos utilizar la clase "csscolumns" que estará solamente disponible en caso que el navegador sea compatible con la distribución en columnas.

.csscolumns #milista li{
   float: none;
   margin: 0;
   width: auto;
}

Como vemos, en caso que el navegador entienda las reglas de estilos para producir las columnas automáticamente, estamos haciendo que los elementos no floten, que su anchura sea automática y que no tengan margen a la derecha.

Conclusión

Puedes ver de nuevo el ejemplo en marcha en una página aparte.

Con esto terminamos los ejemplos de detección de compatibilidad CSS3 de Modernizr, pero recordar que en la documentación de las librerías encontraréis muchas otras clases para detección de la compatibilidad con CSS3.

En los siguientes artículos daremos un paso adelante, pues aun nos queda mucho por aprender de Modernizr y cosas más interesantes todavía, como la carga de Polyfills para compatibilidad con HTML5.