Me preguntaron no hace mucho sobre cómo hacer que un fondo con degradado se viera en navegadores antiguos, aunque se implementara en css3. Es una buena pregunta.
Hasta ahora se usaba una imagen con el degradado y se establecía como background-image, pero css3 permite hacer esto mismo sin tener que descargar imágenes, por lo que se ahorra tráfico de datos y se gana en velocidad de carga de la web.
La primera idea es hacer:
body{background: linear-gradient(#eee 0, #fff 100%) no-repeat}
Esta línea es totalmente válida en css3 y la interpretarán los navegadores modernos (aunque sea con un prefijo), pero un navegador antiguo la omitirá ya que no la entiende.
La solución que proporcioné a esto es aprovechar que los navegadores interpretan la última entrada válida por lo que se puede establecer:
body{
/* para navegadores antiguos se hace como hasta ahora, editando una imagen y estableciéndola como fondo */
background: #fff url(fondoDegradado.jpg) left top repeat-x;
/* y para navegadores compatibles con css3 */
background: linear-gradient(#aaa 0, #fff 100%) no-repeat;
}
De esta manera el navegador antiguo se quedará con la primera definición de background, ya que no entenderá la segunda, y pintará la imagen de fondo repetida horizontalmente.
El navegador nuevo, sin embargo, interpretará la primera definición de background pero se verá sobreescrita por la segunda que le indicará que en lugar de descargar la imagen debe realizar un degradado y no llegará a iniciar la descarga de la imagen.
El mismo método de priorización puede ser usado para los bordes redondeados realizados con imágenes para navegadores antiguos pero que ahora css3 permite realizar con solo una entrada. Aprovechando que el background image ha cambiado en su especificación, se puede usar para eliminar la imagen.
.pestana
{
/* los navegadores antiguos requieren imágenes para la pestaña */
background: #fff url(pestana.gif) left top no-repeat;
/* los nuevos navegadores permiten múltiples imágenes de fondo, cosa que uno antiguo no permitirá y se quedará con el background anterior */
background: none none;
/* los nuevos navegadores aceptan border-radius para las esquinas redondeadas */
border-radius: 10px 10px 0 0;
}
Con estos sencillos trucos se puede usar css3 manteniendo el método antiguo únicamente para los navegadores que lo requieran y sin usar hacks que quiten la validez a la página.
