Colores del sistema

He estado investigando cómo implementan los colores de CSS los navegadores web más utilizados por la mayoría de usuarios. A la hora de asignar un color podemos hacerlo en formato hexadecimal (#FFFFFF, #0000FF, #FF0000…), indicando los niveles de luminosidad de los colores primarios (rgb(255,255,255), rgb(255,0,0), rgb(0,0,255)…) o mediante palabras clave que identifican distintos colores (white, blue, red…). Además, podemos utilizar otro conjunto de palabras clave que identifican colores de la interfaz gráfica del sistema operativo. Utilizar colores del sistema puede ser interesante a nivel estético, pero es a la hora de ofrecer accesibilidad donde resultan realmente útiles. Por ejemplo, si preparo mi blog tomando como colores principales los del sistema, un usuario sensorialmente capacitado podría leer el texto normalmente, con texto oscuro sobre fondo blanco. Sin cambiar de estilo CSS, un usuario con problemas de visión vería mi blog en alto contraste de forma automática si la configuración visual de su equipo fuese alto contraste. Para comprobar la configuración de colores en los distintos navegadores, he escrito el siguiente documento html http://www.treeweb.es/­__archivo__/­TreeWeb/­Blog/­Tecnico/­css/­CSS_­System_­Colors­.html y lo he probado en Firefox 3.0, Opera 9.51, Internet Explorer 6.0 y Safari 3.2.1, todos sobre Windows XP. A continuación la imagen comparativa:

Todos los navegadores devuelven correctamente los colores del sistema excepto Safari, que en lugar de utilizar los colores de Windows XP utiliza los colores de su propia apariencia. Los colores más importantes en el ámbito de la accesibilidad son:

• Window y WindowText, para el texto simple
• ButtonFace y ButtonText, para los botones
• InfoBackground y InfoText, para las etiquetas de información

Como ejercicio, he montado una estructura con divs (http://www.sinos.es/others/wp-res/1/css_ventana.html), y le he dado formato con CSS para que se pareciera a las típicas ventanas de windows. Además he utilizado los colores del sistema para observar la visualización en distintos navegadores. Veamos si hay diferencias…
Éste documento html tiene incluida una línea al principio llamada DTD (Definición del Tipo de Documento). Ésta línea es interpretada por el navegador y ajusta determinados comportamientos a la especificación que indica la DTD. La definición que he utilizado es la siguiente:

Firefox es de los navegadores que mejor se comporta, funciona generalmente bien con cualquier DTD y utiliza los colores de sistema correctamente. Aunque siempre se ha comportado de forma aceptable, sólo la versión 3.0 ha sido capaz de superar el test Acid 2.

Ópera también destaca por ser estricto a la hora de mostrar contenido web y al igual que Firefox 3, pasa el Acid 2 correctamente. Como se observa en la imagen, utiliza los colores del sistema correctamente. No lo he comprobado pero sería muy probable que ambas imágenes fuesen idénticas píxel a píxel.

A Internet Explorer le precede casi una leyenda épica que habla sobre lo mal que se adapta al estándar y a la especificación html, css, javascript… y un largo larguísimo etcétera. Sin embargo, con la DTD anterior me ha sido posible encontrar soluciones para Internet Explorer 6 con un aspecto idéntico muy parecido al resultado de los demás navegadores. He de confesar que en ocasiones, cuando algo funcionaba bien en Firefox, Ópera y Safari, funcionaba mal en Internet Explorer y tenía que añadir un div adicional o especificar más propiedades de las necesarias. Las cualidades de Internet Explorer 6 son… ehhh, uf!! ¡si no lo sabe ni google! Simplemente es diferente. En general se puede decir que tiene bastantes propiedades predefinidas, interpreta el código sintácticamente mal escrito y lo corrige de la forma que cree conveniente. Es mucho más flexible con el código que el resto de navegadores y tiene la mala costumbre de darle un comportamiento muy suyo a los elementos de la página.Por ejemplo, aplica el modelo de caja de bloque en línea (que en otros navegadores se consigue con display:block-inline) a todos los elementos que dispongan de un tag html. Ésto es muy útil, por ejemplo, a la hora de establecer anchos de un párrafo pero el resto de navegadores no lo interpreta. Además, Internet Explorer 6.0 no pasa correctamente el test Acid 2 y las versiones 7.0 y 8.0 beta 1 tampoco pasan el test.

Por último, prestemos atención al navegador de la compañía fundada por Steve Jobs. Safari también es otro de los grandes que se adapta al stándar. El comportamiento es sospechosamente similar al de  Firefox; me gusta. No tengo mucha experiencia con Safari, pero saber que procede de Apple es casi una garantía de que está pensado para el usuario hasta el más mínimo detalle. La apariencia del navegador está pixemétricamente estudiada, parece simple y muy limpia. Aunque es el interior de este navegador lo que más nos interesa en este artículo.

Como se aprecia en la imagen, los colores del sistema de Safari no son en realidad los colores del sistema de Windows. Probablemente, a excepción de los colores, sea la que más se adapta a la especificación de la w3c y cuentan que, en lo más profundo del lejano imperio de Apple, existe una versión en desarrollo que es la única de entre todos los navegadores que es capaz de superar con éxito el gran test de los tests web de nuestros días, el aterrador Acid 3.