Esto implica que todos aquellos usuarios que tengan Windows Update activo y no desactiven la actualización automática explícitamente, estarán usando Internet Explorer 8 (Windows XP) e Internet Explorer 9 (Windows Vista, Windows 7) en sólo unos meses.

¿Nos libraremos al fin de la tiranía de IE6? Sólo queda cruzar los dedos, y esperar a las estadísticas.

¿Los más inteligentes, siempre según el estudio? Los usuarios de Opera, Camino y, curiosamente, IE con Google Chrome Frame. ¡Felicidades a los premiados!

Los desarrolladores del motor de renderizado que utilizan Safari y Google Chrome, Webkit, fueron los primeros en sugerir la creación de degradados utilizando CSS, a principios de 2008. Su implementación, disponible para Safari 4 y superiores y Google Chrome 1 y superiores, soportaba degradados lineales y radiales utilizando las sintaxis:

-webkit-gradient(linear, punto_inicio, punto_fin, parada[, parada]+)
-webkit-gradient(radial, centro_interno, radio_interno, centro_externo, radio_externo, parada[, parada]+)

Desde Mozilla se comenzó entonces a implementar una sintaxis similar a la de Webkit, ampliada, que se vería abandonada al poco tiempo, cuando la W3C propuso una sintaxis alternativa, que es la que se acabó por introducir en Firefox 3.6 (Gecko 1.9.2).

El borrador de la W3C define actualmente 4 funciones para la creación de degradados, a las que Mozilla añade el prefijo -moz-, por tratarse de una implementación propietaria de una característica experimental, que puede diferir de la de otros navegadores. Las funciones del borrador son:

• linear-gradient(): para crear un degradado lineal
• radial-gradient(): para crear un degradado radial
• repeating-linear-gradient(): para crear un degradado lineal que se va repitiendo hasta el final del bloque
• repeating-radial-gradient(): para crear un degradado radial que se va repitiendo hasta el final del bloque

A principios de este año 2011, Webkit (Safari 5.1 y Google Chrome 10) adoptó también estas funciones, aunque manteniendo las anteriores por razones de compatibilidad. Opera también se ha sumado a su implementación, introduciendo estas funciones en la versión 11.10 del navegador. Webkit y Opera utilizan, respectivamente, los prefijos -webkit- y -o- al utilizar estas funciones.

Por otro lado, Internet Explorer, como comentamos, no permite crear degradados con CSS, sino que tenemos que utilizar sus tristemente famosos filtros, y en concreto, el filtro gradient, disponible desde la versión 5.5. Estos hacen uso de DirectX, y pueden suponer un consumo exhaustivo de recursos, por lo que no os aconsejo excederos.

En resumen, para crear un bonito degradado entre dos tonos de azul, #2B93D2 y #77BCE6, que sea compatible con las últimas versiones de los navegadores más populares, podríamos hacer lo siguiente:

.degradado {
  /* Color alternativo para versiones que no soporten degradados */
  background-color:#2B93D2;

  /* Safari 4+ y Chrome 1+ */
  background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #2B93D2), color-stop(1, #77BCE6));

  /* Safari 5.1+ y Chrome 10+ */
  background-image:-webkit-linear-gradient(#2B93D2, #77BCE6);

  /* Firefox 3.6+ */
  background-image:-moz-linear-gradient(top, #2B93D2, #77BCE6);

  /* Opera 11.10+ */
  background-image:-o-linear-gradient(top, #2B93D2, #77BCE6);

  /* Internet Explorer 5.5+ */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#2B93D2', EndColorStr='#77BCE6');
}

obteniendo el siguiente resultado (ten en cuenta que es necesario utilizar uno de estos navegadores para poder ver el resultado):

Veamos ahora la sintaxis exacta de estas funciones en cada uno de los navegadores.

Safari 4+ y Chrome 1+

Empecemos por la antigua sintaxis de Webkit. Los degradados lineales se crean de la siguiente manera:

-webkit-gradient(linear, punto_inicio, punto_fin, parada[, parada]+)

punto_inicio y punto_fin definen una recta que es la dirección en la que se aplicará el gradiente. Con left top como punto de inicio y right bottom como punto de fin, por ejemplo, el degradado se aplicará de la esquina superior izquierda a la inferior derecha.

Las “paradas” son funciones color-stop() que indican el color que tomará el degradado en un cierto punto de la línea. El valor color-stop(0.5, #333), indicaría que queremos un gris oscuro en la mitad del degradado. También se puede utilizar from() y to() para indicar el color al inicio y al final de la línea, respectivamente, en cuyo caso, obviamente, no hace falta especificar el punto.

El siguiente ejemplo crearía un degradado entre tres tonos de gris, de la esquina superior derecha a la inferior izquierda. Podéis ver el resultado un poco más abajo, si utilizáis Safari o Chrome.

background-image:-webkit-gradient(
    linear,
    right top,
    left bottom,
    color-stop(0.1, #88857D),
    color-stop(0.3, #999),
    color-stop(0.9, #CCC)
);

Los degradados radiales toman la siguiente forma:

-webkit-gradient(radial, centro_interno, radio_interno, centro_externo, radio_externo, parada[, parada]+)

centro_interno es el centro del círculo interno del degradado, mientras que centro_externo lo es del círculo externo. Se pueden utilizar las palabras clave left, center y right para designar la componente horizontal, y top, center y bottom para la componente vertical. También podemos usar porcentajes.

Por otro lado, radio_interno y radio_externo, como sus nombres indican, son los radios de estos dos círculos.

Por último tenemos una serie de paradas, que funcionan de forma similar a los degradados lineales.

Al utilizar la siguiente propiedad, por ejemplo:

background-image:-webkit-gradient(
    radial,
    center center,
    0,
    50% 50%,
    90,
    color-stop(0.1, #888),
    color-stop(0.3, #999),
    color-stop(0.9, #CCC)
);

el bloque tomaría el siguiente aspecto:

Safari 5.1+, Chrome 10+, Firefox 3.6+ y Opera 11.10+

Según el borrador de la W3C el degradado lineal se creará de esta forma:

linear-gradient([dirección,]?	parada[, parada]+);

O si queremos que el degradado se repita varias veces, hasta el final del bloque:

repeating-linear-gradient([dirección,]? parada[, parada]+);

El primer valor, opcional, es la dirección del gradiente. Este se puede especificar mediante un ángulo (0deg, 90deg, 200deg, …) o con un punto, siendo la dirección en este caso la línea que pasa por dicho punto y por el centro del elemento. Para especificar el punto se pueden utilizar las palabras clave left, center y right para la componente horizontal, y top, center y bottom para la componente vertical. En caso de no indicarse la dirección del gradiente, se utiliza top como valor por defecto, es decir, el gradiente iría de arriba a abajo en línea recta.

A continuación tenemos las paradas, compuestas por los colores, y, opcionalmente, la posición en la línea en la que se situará dicho color.

Las siguientes propiedades, por ejemplo, crearían un degradado entre dos tonos rojos en un ángulo de 170º, situándose el primero de los tonos a 30px del inicio de la recta y el segundo a 50px:

background-image:-moz-linear-gradient(170deg, #E04141 30px, #CD2727 50px);
background-image:-webkit-linear-gradient(170deg, #E04141 30px, #CD2727 50px);
background-image:-o-linear-gradient(170deg, #E04141 30px, #CD2727 50px);

Para los degradados radiales se utiliza la siguiente sintaxis:

radial-gradient(
	[centro,]?
	[externo,]?
	parada[, parada]+
)

El primer valor, opcional, es el centro del círculo interior en el que comienza el degradado. Si se omite, el valor por defecto es center.

El segundo valor, también opcional, define la circunferencia externa. Se indica primero la forma, usando las palabras clave circle (círculo, radio constante) o ellipse (elipse, radio vertical y horizontal), y a continuación el tamaño, usando las palabras clave:

• closest-side: la figura externa toca el borde/s más cercano al centro del bloque
• closest-corner: la figura externa toca la esquina/s más cercana al centro del bloque
• farthest-side: la figura externa toca el borde/s más alejado del centro del bloque
• farthest-corner: la figura externa toca la esquina/s más alejada del centro del bloque
• contain: sinónimo de closest-side
• cover: sinónimo de farthest-corner

Por último, se indican una o más paradas en la misma forma que los degradados lineales.

El siguiente ejemplo crea un degradado radial de rosa a rojo en la esquina superior izquierda:

background-image:-moz-radial-gradient(20px 20px, circle farthest-side, pink 0%, red 90%);
background-image:-webkit-radial-gradient(20px 20px, circle farthest-side, pink 0%, red 90%);
background-image:-o-radial-gradient(20px 20px, circle farthest-side, pink 0%, red 90%);

Internet Explorer 5.5+

Internet Explorer, como dijimos, también permite crear degradados, aunque para ello tendremos que hacer uso de su filtro progid:DXImageTransform.Microsoft.gradient. Su uso es bastante sencillo, por lo simple de su funcionalidad. Sólo hay que indicar el valor del color de inicio (startColorstr) y el de fin (endColorstr), de la siguiente forma:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#8AAD28, endColorstr=#EEEFB1);

¿Son suficientes la interfaz más compacta, la privacidad mejorada, la sincronización, el incremento al soporte de HTML 5, el nuevo gestor de extensiones o las mejores en la velocidad y el rendimiento para que Firefox siga ostentando el título de mejor navegador del mercado? ¿es un título que perdió hace tiempo? ¿pensáis nunca lo llegó a tener? Aquí tenéis la encuesta.

¿Cuál es el mejor navegador del mercado?

• Firefox 4
  1350 (53% de los votos)
• Google Chrome 10
  787 (31% de los votos)
• Opera 11
  222 (9% de los votos)
• Internet Explorer 9
  77 (3% de los votos)
• Otros
  45 (2% de los votos)
• Safari 5
  44 (2% de los votos)

Votos totales: 2525
Iniciada: 22 Marzo 2011

Este es el convincente argumento que lanzan desde la propia Microsoft para animar a sus usuarios a dar el salto de Internet Explorer 6 a Internet Explorer 8. Una buena noticia, aunque es una lástima que no se animen a utilizar medidas más drásticas, como cabezas de caballo en las camas.

En la misma web también podéis encontrar un par de vídeos bastante simpáticos con Dean Cain (de Las nuevas aventuras de Supermán) como protagonista, en los que nos explican algunas de las características de IE 8. Esto SÍ es una buena campaña de marketing, Microsoft.

Vía

Ya comentamos algunas de las novedades de esta versión cuando apareció la primera beta, hace más de un año. También podéis consultar el tour visual de su web. Simplemente no entréis pensando que vais a encontrar mejoras espectaculares en el soporte de estándares…

El resultado es muy simpático

En Ars technica han echado números y nos comentan que el consumo con 50 pestañas se ha reducido hasta la mitad. A continuación podéis ver un gráfico comparando el consumo de Firefox 3 beta 4, Firefox 2, Internet Explorer 7, Opera 9.5 beta y Safari 3.0.4 beta (que no terminó el test porque se colgó…). El resultado es impresionante.

Recordaros también que, como comentábamos hace unas semanas, Firefox también será un 200% más rápido con el trabajo en JavaScript. ¡Esta versión tiene muy buena pinta!