Más sobre CSS3 y compatibilidad

  • Por
Más ejemplos de detección de características de las CSS3 con Modernizr y aplicación de estilos alternativos para navegadores no compatibles.
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;
}

Nota: Ojo, hemos querido comentar este ejemplo porque Firefox 3 da un falso positivo a la compatibilidad con text-shadow. Así que tener cuidado con este detalle porque en Firefox 3, a pesar de no sobrear el texto, nuestro ejemplo aparecería con color blanco, lo que dificultaría la lectura. Quizás no sea un problema muy representativo, porque justamente acaba de salir Firefox 6. Sin embargo hace pocos meses Firefox 3 era la versión más actual. Por ejemplo, hoy podemos ver en Internet Explorer 9 que aun no acepta sombreado y el texto nos aparecerá en oscuro.

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;
}

Nota: Si podéis ver el ejemplo en navegadores que sí aceptan los atributos CSS3 de columnas (por ejemplo Google Chrome, y navegadores que no aceptan esas reglas (por ejemplo Internet Explorer 9) veréis que las columnas emuladas no distribuyen exactamente los elementos de la misma manera que las columnas emuladas. La distribución emulada es menos útil porque generalmente leemos las columnas de arriba a abajo, pero estéticamente el resultado es parecido.

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.

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

Lola

26/8/2011
Gracias por esos truquillos
Muchas gracias por todo este informe. Me gustaria saber más de CCS3

midesweb

26/8/2011
Más sobre CSS3
Hola Lola,

Si quieres saber más sobre CSS3 pásate por este manual:
http://www.desarrolloweb.com/manuales/css3.html

Espero que lo disfrutes ;)

Kibalam

01/9/2011
Compatibilidad.
Nuevamente IE dando problemas :/ he probado en todos los otros navegadores y todo bien y en ninguno de los IE me funciona :/ una lata.

darklobo

02/9/2011
interesants eso de css
bueno soy nuevo en esto pero me parece muy bueno para realizar encabezados dinamicos para las web

jeffsantillan

04/11/2012
Excelente
Excelentes ejemplos, muchas gracias por tu articulo.