Actualización en los Gradientes Lineales CSS3

Wednesday 20 de April de 2011, 9:45 am 3 Comments

CSS es una maravilla; aunque una de las cosas que más odio es tener que ajustarme a las diferentes sintaxis de cada navegador a la hora de utilizar ciertas características de CSS3, como son los gradientes lineales. Afortunadamente, las cosas están empezando a cambiar, y todos ellos empiezan a ajustarse al estándar.

Antes que nada, aquí un ejemplo del estándar:

background: linear-gradient(top, black 0%, white 100%);

y una versión compacta:

background: linear-gradient(black, white);

en donde al ser omitidos, se asume “top” como punto de partida, así como “0%” y “100%” para los puntos de inicio en cada parada de color (color stops).

Ahora bien, veamos como es implementada esta característica en cada navegador.

Gradientes Lineales en Firefox

El navegador de Mozilla soporta los gradientes lineales desde Firefox 3.6, con la enorme ventaja que desde el inicio se ajustó a la sintaxis del estándar.

background: -moz-linear-gradient(black, white);

Gradientes Lineales en Chrome y Safari

Como saben, ambos navegadores usan el motor de renderizado Webkit, por lo que a partir de Safari 4 y Chrome 2 se introdujo el uso de gradientes lineales, pero con una sintaxis realmente horrible:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));

¡Ya no más! Ahora a partir de Safari 5.1 y Chrome 10 la sintaxis ha sido ajustada al estándar:

background: -webkit-linear-gradient(black, white);

Gradientes Lineales en Opera

¡Más vale tarde que nunca! Apenas con la reciente salida de Opera 11.10, por fin ya se pueden usar los gradientes lineales, y por supuesto que se han ajustado a la sintaxis del estándar:

background: -o-linear-gradient(black, white);

Gradientes Lineales en Internet Explorer

Por último, veamos al siempre odiado y jamás igualado IE. En el caso de IE6 e IE7, su implementación de gradientes lineales es mediante el siguiente monstruo:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');

¿Mejoró en IE8 e IE9? No, sólo la ajustaron un poco:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";

Pero parece que hay una luz al final del tunel, ya que con el recién liberado IE10 Platform Preview (cuya versión estable saldrá hasta el 2012), ya es posible usar la sintaxis siguiente:

background: -ms-linear-gradient(black, white);

Ejemplo Completo de Gradientes Lineales

Mientras los navegadores sigan usando prefijos, no tendremos otra opción que usarlos todos en nuestro código para que éste sea compatible con la mayoría de los navegadores web. Aquí el ejemplo completo de uso:

#elemento {
	background: -moz-linear-gradient(black, white); /* FF 3.6+ */
	background: -ms-linear-gradient(black, white); /* IE10 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
	background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
	background: -o-linear-gradient(black, white); /* Opera 11.10 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
	background: linear-gradient(black, white); /* El Estándar */
}

Les recomiendo leer la especificación oficial del estándar para conocer a fondo todo lo que se puede lograr con los gradientes lineales (uso de varias paradas de color, especificación de ángulos, degradados repetitivos, etc).

Via: Impressive Webs.

Share

Post tags