CSS Zen Garden: La Página original tal como puede verse en la web CSS Zen Garden Fuente: Captura de pantalla por el autor Pulse sobre la imagen para agrandarla

CSS Zen Garden es un sitio web creado en 2003 por Dave Shea. Mitad manifiesto y mitad galería, según sus propias palabras, Css Zen Garden surgió como respuesta al uso elemental y falto de inspiración que se hacía de las hojas de estilo en cascada (CSS). La idea era crear un código HTML elemental e inamovible y solicitar a diseñadores, programadores y creadores web en general que contribuyeran sus hojas CSS para dar formato visual a dicho código HTML.

HTML es un código de descripción de página, soporte lógico de toda página web, que se creó para estructurar lógicamente las páginas web, no para dar formato visual a las mismas. En los años 90 la proliferación de sitios web, junto con la de browsers cada uno con sus distintas propiedades y formas de interpretar HTML había creado un cierto caos en el que codificar una página web que se viera igual en distintos navegadores era poco menos que una proeza. (Todavía hoy tiene su intríngulis).

Una organización de diseñadores web denominada "the Web Standards Project" empezó a trabajar con los fabricantes de navegadores para alinear sus software (que presentaba notables dieferencias en comportamiento para una misma página HTML) con las recomendaciones del "WorldWide Web Consortium" (W3C).

Un poco de CSS

Una de las bases de la programación inteligente de interfaces gráficas ha sido siempre la de separar el contenido de la forma que se le da, el fondo de la forma. Esto quiere decir que todo el código que da funcionalidad al programa no debe contener ninguna instrucción referente a la forma en que se representa, sólo a su estructura. Por ejemplo en el código HTML

<blockquote>Esto es una cita</blockquote>

"blockquote" hace referencia a un bloque de texto que corresponde a una cita de otro texto. Es decir es una forma de estructurar una frase de un documento, pero no especifica que tamaño de letra o en que color se ha de pintar. Curiosamente, como muchos browsers indentaban este tipo de párrafo, se ha usado <blockquote> regularmente para producir un efecto visual como es la indentación o el sangrado, para el que no estaba pensado.

Si no respetamos ese principio de programación, cada vez que cambiemos de opinión sobre, por ejemplo, qué color ha de tener un título de nivel 3, habremos de recorrer todas las páginas que contienen ese código para cambiarlo al nuevo color lo cual puede convertirse en una pesadilla, limitando enormemente la flexibilidad de nuestros diseños.

CSS Zen Garden: Algunas de entre las centenares de contribuciones. De izquierda a derecha "Like the Sea", "Deco"y "Bugs" tal como se pueden ver en la web de CSS Zen Garden. Aunque parezca mentira, el código HTML de la página web es el mismo, sólo cambia la hoja de estilo! Fuente: Captura de pantalla por el autor Pulse sobre la imagen para agrandarla

Los resultados de los trabajos de los grupos antes mencionados proporcionaron varios estándares para HTML y, particularmente, la especificación de las hojas de estilo en cascada CSS. Mediante el añadido de unos identificadores en los "tags" de HTML como por ejemplo "class" e "id" es posible definir que un "tag" de HTML es de una clase especial definida por el usuario. Así

<blockquote class="literaria">En un lugar de la Mancha...</blockquote>

indica que estructuralmente lo que está entre "blockquotes" es una cita literaria.

En un fichero aparte se definen con qué formato se representarán visualmente las diferentes instancias de class e id con lo que efectivamente separamos forma de fondo. Aunque la cita anterior esté repetida cientos de veces en muchas páginas de nuestra web la podemos representar de muchas maneras diferentes sin más que cambiar la entrada del fichero CSS donde se especifica dicha representación.

Zen Garden de nuevo

CSS se estaba utilizando a principios de siglo para cometidos relacionados más con la programación de páginas web que para su diseño visual y los esfuerzos por demostrar su bondad para gestionar el aspecto visual de la web no llegaban a los diseñadores gráficos. En la mente de Dave Shea empezó a tomar forma la idea de que si existiera un repositorio de trabajos gráficos excelentes basados en CSS los diseñadores se darían cuenta de su potencial al tener ejemplos que valorar. Con este propósito creó CSS Zen Garden en 2003.

CSS Zen Garden consiste en una sola página que contiene un código no muy largo explicando qué es e invitando a cualquiera que lo desee a contribuir una hoja CSS para dar formato a dicho código. Existen enlaces en el mismo a las distintas contribuciones. Los resultados son espectaculares en algunos casos. En todos queda demostrada la enorme flexibilidad y potencia de las hojas CSS y la habilidad de los diseñadores para usarlas.

CSS Zen Garden: Una interesante contribución, que se expande en horizontal es "SilverScreen", tal como puede verse en la web Fuente: Captura de pantalla por el autor Pulse sobre la imagen para agrandarla

Hay más de 700 contribuciones, esto es, hojas de estilo. Cada una produce lo que parece una web completamente distinta a las demás, con exactamente el mismo contenido HTML. Más importante aún, revisando el código de las hojas CSS se puede aprender mucho acerca de como utilizar esta tecnología de uso imprescindible en cualquier web seria.

Porque CSS Zen Garden es una galería de auténticas maravillas en el diseño de páginas web donde inspirarse para realizar diseños, distribuir apropiadamente los elementos de la página, utilizar tipografía apropiada, crear efectos especiales con CSS avanzadas o simplemente descubrir la enorme potencia de las hojas de estilo en cascada.

Enlaces de este artículo: