Breve acercamiento e introducción a CSS

Un breve acercamiento a lo que son las hojas de estilo en cascada (CSS), para qué se usan, sus muchas ventajas y sus pocos inconvenientes y por último un ejemplo práctico.

Las hojas de estilo en cascada (a partir de ahora CSS) son de forma resumida un estándar recomendado por el W3C para crear un sistema eficiente de controlar la apariencia (diseño, maquetación...) de una página web con reglas simples que se aplican de forma descendiente.

Se usan principalmente para separar el contenido de la presentación permitiendo -- como ejemplo -- que con un mismo contenido (x)HTML se vea de distintas formas según la hoja de estilo utilizada. Así pues, podemos controlar la apariencia sin modificar el contenido para optimizarla a distintos dispositivos o situaciones (PDAs, ordenadores, televisiones, sistemas braille, etc.).

También sirven para que un mismo contenido pueda tener varias presentaciones, en CSS Zen Garden se puede ver bastantes diseños distintos con el mismo contenido (solo cambia el fichero CSS).

Para controlar la apariencia en distintos dispositivos se usa un enlace de tipo link con un media como por ejemplo:

href="fichero.css" title="opcional, descripción del CSS" />

De este modo, los navegadores de dispositivos "habituales" como son los ordenadores intentaran cargar el media="screen" siempre que tengan para elegir, una lista de los media disponibles y a que dispositivos están enfocados:

• all, el CSS será el cargado para todos los dispositivos.
• screen para monitores de ordenador normales
• print para dispositivos de impresión (es muy recomendable hacer un fichero CSS sin componentes de navegación para que la impresión sea lo más limpia posible).
• aural sintonizadores de voz.
• handheld asistentes personales (PDA).
• braille máquinas capaces de reproducir formato braille para personas invidentes.
• embossed para imprimir texto en braille.
• projection proyectores y transparencias.
• tty terminales (como el interprete de comandos de los Unix/POSIX).
• tv ¿Hace falta explicarlo? para televisiones, normalmente limitadas por su baja resolución y su escaso desplazamiento.

Podemos presuponer que en general los más utilizados son screen y print y después de ellos otros como handheld o projection.

¿Para qué sirve separar contenido y presentación?

El lenguaje (x)HTML ha estado limitado desde siempre en respecto a darle "aspecto", esto es así por que desde un principio se inventó para unos usos muy concretos -- principalmente información científica --, estos problemas tuvieron algunas soluciones bastante pobres (por no decir chapuceras) aunque quizá también ingeniosas por la época:

1. Tablas para el diseño.
2. Imágenes transparentes de pocos pixeles para ajustar margenes.
3. Espacios en blanco.
4. (Horror): Etiquetas no estándar.

Chapuzas muy utilizadas por la mayoría de webmasters (yo me incluyo) pero es que realmente no había mucha más alternativa.

Existen problemas mucho peores, tener mezclado el diseño y el contenido hace bastante difícil -- por no decir imposible -- cambiar el diseño por completo de una web de más de 100 ficheros (ya no digamos las que muevan cifras de miles de documentos HTML).

Ahora tenemos XHTML, CSS, nuevas tecnologías que crean webs un más dinámicas como el uso de XMLHttpRequest+JS (AJAX), etc.

Ventajas e inconvenientes

Ventajas (algunas):

• Controlar la presentación de miles de páginas mediante un fichero.
• No repetir en cada página trozos de código HTML referentes a la maquetación.
• Lo anterior es causa directa de un ahorro de más del 20% del tamaño de los ficheros HTML (O lo que es lo mismo: Ancho de banda que dejamos de consumir).
• El contenido sigue siendo legible sin interfaces gráficas.
• Poder crear múltiples plantillas para diferentes dispositivos.
• Y aunque no menos importante, es una recomendación del W3C que más bien o más mal, todos los navegadores gráficos soportan¹.

Tocan las desventajas:

• El concepto de CSS no es que "se visualice igual en cualquier navegador" si no más bien que se visualice "lo más parecido posible en cualquier navegador", esto hace que NO SIEMPRE se vea igual en uno u otro.
• Como siempre, tenemos que tener en cuenta que no todos los navegadores interpretan igual el CSS y por lo tanto lo que funciona en uno no tiene por que funcionar por completo en el otro aunque esto también pasa con HTML a pelo.

¿Ejemplos?

Cualquier CMS actual, blog, etcétera usa de una forma más o menos amplia XHTML para el contenido y CSS para la presentación. Grandes portales como ESPN.com o Wired migraron a estas recomendaciones hace tiempo.

Y como ejemplo final, Mike Davidson de ESPN en una entrevista para Netscape Devedge (ya no existe, la entrevista fue en el 2003) declaró que los ahorros en ancho de banda con el cambio fueron de (sin perdida alguna en la calidad de la web) la friolera de 2 terabits diarios, 61 terabits mensuales y 730 terabits anuales.

Si consideramos que el ancho de banda NO lo regalan, esto es un gran ahorro.