Paletas de color para el desarrollo web

Una de las mejores características de las hojas de estilo en cascada está descrita en su propio nombre: en cascada. Significa que si cambias la definición del estilo todos los elementos de la página que tienen ese estilo aplicado cambiarán al mismo tiempo en una “cascada”.

De acuerdo a las recomendaciones de la W3C los diseñadores no debemos basarnos solo en el color para transmitir información. Es una recomendación razonable que debemos seguir siempre.

Como muchos de vosotros diseñadores sabréis, nosotros solemos trabajar con paletas de color. En los programas de edición gráfica definimos paletas de color y las usamos para aplicar el color a los distintos estilos en uso. De esta forma, si queremos cambiar el esquema de colores solo tenemos que redefinir la paleta y el cambio se aplica a todos los elementos del documento que usan esos colores, dando un nuevo aspecto al documento. De la misma forma, podemos usar el mismo estilo pero diferentes colores para distintas secciones de un documento. Pero en CSS si quieres hacer eso debes crear una nueva hoja de estilos, haciendo un "buscar y reemplazar" en todo el documento para cambiar las definiciones de colores.

Es por eso que me gustaría ver implementadas las paletas de colores en CSS3.[...]

Esta cita de electriblog ilustra a la perfección una pequeña pero insistente molestia que aparece siempre que nos metemos con el diseño de hojas de estilo. Se ve que el artículo completo se me quedó dando vueltas por la cabeza, y el otro día mis dos neuronas chocaron entre sí y recordaron un artículo de PPK en el que podría hallarse la solución a este problemilla: resulta que, algunas reglas, admiten como posible valor el comando url(), por ejemplo:

¿Y esto qué tiene de útil? ¿cómo ayuda a crear paletas de color? La clave, poco conocida, es que el estándar establece que el comando url() puede admitir algo de javascript (ejemplo aquí). El javascript que se puede meter es bastante limitado pero, al fin y al cabo, puedes meter javascript. Es decir, imagina que tienes definida una variable javascript llamada path_to_gif, entonces sería válido hacer algo así:

Sabiendo esto, enseguida uno piensa en definir la paleta de color en un archivo javascript y desde la CSS hacer algún tipo de guarrería (como en el ejemplo anterior, un document.write) que enganchase estas variables a los atributos de color. Antes de que vayas corriendo como un poseso a probarlo, ya te lo digo yo: esto no funciona, el javascript se ejecuta en un ámbito demasiado reducido. Parece ser que la intención original del estándar era proveer de cierta flexibilidad al parámetro para permitirle algo más de dinamismo.

Por tanto, esta primera solución no es válida. Aún así ya han salido un par ideas bastante útiles que nos van a orientar hacia el camino correcto, a saber: definir la paleta de color en un archivo javascript y meter de alguna manera código javascript dentro de las hojas de estilo.

La primera parte es bien sencilla de conseguir, ahora bien, la segunda tiene bastante más miga. Hemos visto que el javascript puede ponerse -malamente- en una hoja de estilo. También hemos oído hasta la saciedad que mezclar javascript con HTML o estilos con HTML va contra-natura, así que imagínate cómo tiene que ser mezclar javascript dentro del CSS...

En cambio, lo que sí es muy común es usar el javascript para alterar el aspecto de una página web, y es por este camino por dónde vamos a llegar a buen puerto. Sin embargo, no nos vale cualquier cutrería, la idea es obtener una solución que sea lo suficientemente transparente y genérica, que traducido al argot del desarrollo web se denomina no intrusiva. Para no explayarme mucho en este punto, citaré otro artículo de PPK que, dicho rápido y en corto, viene a decir que un script no intrusivo debe cumplir con las siguientes características (si quieres leer algo más acerca del scripting no intrusivo, este artículo es un buen lugar por dónde empezar):

1. Usable: el script debe ser usable, es decir, ofrecer una funcionalidad y limitarse a eso.
2. Accesible: el script debe ser no intrusivo cuando no está funcionando. El sitio web no debería depender del script.
3. Fácil de implementar: el script debería ser no intrusivo para los desarrolladores, su trabajo debería limitarse a incluir el script e indicar a qué elemento o elementos del HTML debería afectar.

Llegados a este punto estamos en condiciones de presentar la última pieza del rompecabezas: Behaviour, una impresionante librería javascript realizada por Ben Nolan, que permite usar selectores CSS para permitir aplicarles funciones javascript de un modo no intrusivo. Técnicamente, es de lo mejor que me he encontrado en mucho tiempo (y en el campo de javascript, que parece propenso a la chapuza, es sin duda lo mejor que he tenido entre manos). Es bastante poco frecuente ver un código tan elegante y que permite tantas cosas pasando tan desapercibido.

Haciendo un resumen muy rápido, gracias a esta librería podemos definir un array de reglas de selectores CSS y asociarles el evento javascript que queramos:

A partir de aquí solo nos queda montar el puzzle. Revisemos todas las piezas que vamos a utilizar:

1. Documento HTML (xHTML a poder ser), con el contenido de la página.
2. Una o varias hojas de estilo, donde en ninguna de ellas van a aparecer los atributos de color (ni color de frente, ni de fondo, ni el del borde). Hecha esta excepción, el resto de la presentación de la página estará definida en la(s) hoja(s) de estilo.
3. La librería javascript Behaviour, con la que separaremos el comportamiento del contenido de la página.
4. Una librería desarrollada por un servidor que se integra de modo transparente con Behaviour y nos permite usar de un modo efectivo y no intrusivo una paleta de color para definir un estilo. En un alarde de originalidad sin precedentes, he decidido llamarla css_init_palette.
5. Un archivo javascript donde definiremos nuestra paleta de color y nuestro array de selectores CSS, para asociar tanto los eventos javascript que deseemos como la paleta de color a los elementos de la página.

La librería que he desarrollado añade el evento on_css_init, de tal modo que, para aplicar nuestra paleta de color, actuamos de igual modo que usando la librería Behaviour al modo tradicional pero haciendo uso de este nuevo evento. No es que sea gran cosa (~2KB) pero, como decía Woody Allen, "la felicidad se encuentra en las cosas pequeñas: una pequeña mansión, un pequeño yate, una pequeña fortuna...".

He añadido también un método de conveniencia llamado set_css_color_palette(el, bg, fg, bd), que recibe como parámetros el elemento HTML al que aplicamos la paleta de color, el color de fondo, el color de frente y el color del borde. Un ejemplo de uso sería el siguiente:

En este ejemplo hay varias cosas que merecen una pequeña consideración:

1. En la definición del método ejecutado en on_css_init se pueden invocar más funciones javascript (caso 'div.div2'), si bien desaconsejo totalmente el hacerlo: no es una buena práctica mezclar presentación con comportamiento así que, si ya hemos tenido que trastear un poco con ello, cuanto menos comportamiento metamos en estos eventos, mejor que mejor.
2. El método set_css_color_palette y el evento on_css_init son independientes entre sí, como se observa en el caso 'div.div3'.
3. La llamada para inicializar la paleta de color, css_init_apply();, ha de ir siempre después de la inicialización de Behaviour (Behaviour.register(css_palette); o Behaviour.apply(); si hemos estado trasteando con el DOM).

A propósito de la primera consideración, estaría muy bien que el futuro estándar CSS 3.0 añadiera soporte para el uso de paletas de color. A mi, la manera más sencilla que se me ocurre es implementando un comando palette(), que pudiera interpretar javascript, de modo similar a cómo se hace en el comando url(). Hasta entonces tendremos que obviar el uso de paletas de color o usar soluciones como la que acabamos de describir.

Como dije antes, css_init_palette está basado fuertemente en Behaviour, así que funcionará en los mismos navegadores en los que lo haga dicha librería. Yo lo he probado en Firefox 1.5 y 2.0 bajo Windows y en Internet Explorer 6.0. Debería funcionar en cualquier navegador normal de hoy en día, pero estaría bien saber de otras personas que hayan podido ejecutar esta librería en otros navegadores y plataformas.

He subido un ejemplo completo de uso para todas aquellas personas que quieran echarle un ojo a todos los componentes del ejemplo juntos. Dado que todo esto es muy web 2.0, escogí la paleta de color de un sitio que me pareció la mar de apropiado para ello. ¡Ah, por cierto! antes de acabar, comentar que la librería está licenciada bajo BSD, igualito que en el caso de Behaviour.

Y colorín colorado, este post se ha acabado (que ya era hora), espero que alguien haya encontrado esto útil y/o interesante, por lo menos como ejercicio intelectual.

Actualización 21/11/2006: ¡Toma ya! ¡La versión inglesa del artículo ha sido referenciada por Ben Nolan en persona! ¡Eso me convierte oficialmente en friqui!esteee, quiero decir, ¡Mil gracias por el post!

servido por foobar 4 comentarios compártelo