No es de extrañar que se haya hecho con casi un 20% del mercado. Y aun así, todavía quedan irreductibles que siguen utilizado Internet Explorer, Safari, Opera o Firefox, como un servidor. ¿A qué grupo perteneces tú? ¿por qué utilizas Google Chrome? / ¿qué tendrían que implementar para que lo utilizaras como navegador?

¿Qué opinas de Google Chrome?

• No me gusta
  1128 (37% de los votos)
• El mejor navegador del mercado
  1104 (36% de los votos)
• Me gusta, pero utilizo otro
  801 (26% de los votos)

Votos totales: 3033
Iniciada: 1 Septiembre 2011

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

Entre las novedades destacadas tenemos el incremento de velocidad al ejecutar JavaScript, hasta un 30% mayor según Google; una gran mejora en la estabilidad, con más de 300 bugs corregidos; autocompletado de formularios y la posibilidad de ocultar toda la interfaz en el modo de pantalla completa, así como de eliminar las miniaturas de las páginas más visitadas, que se muestran al crear una nueva pestaña.

Lo cierto es que Chrome parece ir camino de convertirse en el navegador perfecto, a falta de mejorar su sistema de extensiones y las versiones para Linux y MacOS.

Basta ejecutar la aplicación y seleccionar nuestro perfil, tras lo cuál podremos comprobar las actualizaciones en “Acerca de Google Chrome”.

En estos momentos la última versión accesible desde el Dev Channel es la 0.2.152.1, cuyos cambios consisten en su mayoría en modificaciones en pos de crear las versiones para Mac OS X y Linux, aunque también se han resuelto más de 20 errores, como problemas con YouTube y Flash en general, con Silverlight o SVG.

No hay una lista de cambios oficial, aunque parece que se han solucionado algunos errores. Lo que no ha cambiado es la versión de WebKit, que sigue siendo la 525.13, la misma que se utilizaba en Safari 3.1.

Es necesario tener la versión 1.1.3 o superior de Wine. No es el caso de la versión de los repositorios oficiales de Ubuntu, por lo que tendremos que añadir primero el repositorio de Wine:

wget -q http://wine.budgetdedicated.com/apt/387EE263.gpg -O- | sudo apt-key add -
sudo wget http://wine.budgetdedicated.com/apt/sources.list.d/hardy.list -O /etc/apt/sources.list.d/winehq.list

Y una vez hecho esto, instalar la nueva versión:

sudo aptitude update
sudo aptitude install wine

Necesitaremos también el script winetricks, con el que descargaremos e instalaremos un par de librerías necesarias para nuestros propósitos, además de flash y distintas fuentes para visualizar las webs correctamente:

wget http://www.kegel.com/wine/winetricks
sh ./winetricks riched20 riched30 flash

Descargamos el instalador offline de Google Chrome desde su página web y lo ejecutamos utilizando Wine para instalar la aplicación.

Para poder utilizar Google Chrome tendremos que pasar un par de parámetros a la hora de llamar al ejecutable:

wine “C:\\windows\\profiles\\USUARIO\\Configuración local\\Datos de programa\\Google\\Chrome\\Application\\chrome.exe” –new-http –in-process-plugins

Y eso es todo. Este es el aspecto de Google Chrome en Linux:

Vía

• about: muestra la información de la versión.
• about:version similar al anterior.
• about:cache muestra el contenido de la caché.
• about:plugins muestra información sobre los plugins instalados.
• about:memory muestra estadísticas de las webs y los plugins que consumen más memoria (se puede acceder también desde el administrador de tareas de Google Chrome).
• about:shorthang la pestaña se cuelga durante un instante.
• about:crash la pestaña se cuelga, mostrando el simpático icono de la pestaña triste que pudimos ver en el cómic de presentación de Google Chrome.
• about:internets huevo de pascua
  
• about:dns información sobre las consultas a las DNS, como tiempo requerido para la consulta de cada dominio o la cantidad de tiempo que hace de la consulta.
• about:network herramientas para comprobar el rendimiento de la red.
• about:stats valores para variables internas del navegador. El subtitulo de la página es “Shhh! This page is secret!”
• about:histograms histogramas con los valores de distintas variables.

Y otros comandos que no son about:

• chrome-resource://about/ similar a about:
• chrome-resource://favicon/ muestra el favicon de la página actual como texto plano.
• chrome-resource://inspector/inspector.html muestra una ventana vacía del inspector (herramienta para inspeccionar elementos de páginas web. Haz clic sobre un área cualquiera de una web y selecciona “Inspeccionar elemento”).
• chrome-resource://new-tab/ crea una nueva pestaña.
• chrome-resource://thumb/ muestra el thumbnail de la página actual como texto plano
• view-cache: similar a about:cache