¿Por qué usar las CSS?

Desde que Dreamweaver MX 2004 salió al mercado, he tenido numerosas oportunidades de demostrar sus nuevas características y su nuevo poder tanto a usuarios existentes como nuevos. Como suele suceder con las demostraciones de productos, apenas comienzo a hablar, se me llena la boca de alabanzas para las nuevas capacidades de Dreamweaver MX 2004 para diseñar y producir CSS, es decir, las hojas de estilo en cascada.

Sin embargo, hace poco un usuario novato me hizo una pregunta que, francamente, me hizo pensar. El usuario preguntó algo sencillo: "¿Por que debería usar las CSS?" En ese momento me di cuenta de que si bien todos aquellos que trabajamos con HTML y CSS día a día estamos bien familiarizados con sus ventajas, muchos de ustedes. no lo están. O por lo menos, podrían no estar completamente conscientes de todas las ventajas que pueden aportar las CSS. Este artículo es mi respuesta, en forma escrita, a la pregunta que hizo ese usuario.

El nacimiento de las CSS

Antes de analizar algunos de las muchas ventajas de las CSS les daré un poco de historia. El órgano rector del web, el W3C, recomendó el uso de las CSS en diciembre de 1996 con la ratificación de la especificación Nivel 1 de CSS. El nivel 1 de CSS describía los atributos para usarse en las páginas HTML. Estos atributos reemplazaron la etiqueta font tradicional y otros marcadores de "estilo" como el color y los márgenes. En mayo de 1998, el W3C ratificó el nivel 2 de CSS que añadía capacidades adicionales a la especificación del nivel 1 e introdujo los atributos de posicionamiento. Estos atributos reemplazaron el uso incontrolado e incorrecto de la etiqueta table para diseñar la presentación de elementos de página. La revisión más reciente a las especificaciones CSS es CSS 2.1, que perfecciona algunos atributos y elimina otros que si acaso tenían algún uso en los navegadores actuales, era muy poco.

Lamentablemente, como suele suceder en el caso de las nuevas tecnologías, las CSS han caminado a paso lento hacia el logro de una adopción generalizada. Una de las razones principales ha sido los navegadores, y a su vez, los diseñadores web que crean sitios para esos navegadores. A la hora de la ratificación de las CSS, Netscape Navigator NN era todavía el navegador predominante, y prácticamente se puede decir que no admitía las CSS. Microsoft añadió muy poca compatibilidad con la versión 3 de su navegador, pero la mayoría de los diseñadores web en ese entonces incluido este autor todavía estaban escribiendo código con NN a modo de plataforma de referencia.

Con el paso de los años, con cada nueva versión, los fabricantes de navegadores han ampliado su compatibilidad con las CSS. Hoy en día, Internet Explorer 6, Netscape Navigator 7, Mozilla, Opera y Safari son todos compatibles con CSS. Esto no quiere decir que los diseñadores y desarrolladores web no tengamos más problemas. Si bien todos los navegadores mencionados admiten el nivel 2 de CSS, lo admiten en distintos grados de cumplimiento. Y en algunos casos, algunos atributos son todavía motivo de frustración. En otras palabras, todavía tiene que aplicar la vieja máxima de poner todo a prueba y hacerlo con frecuencia. Sin embargo, si se limita a los atributos fundamentales de las especificaciones CSS, sus páginas se reproducirán correctamente.

¿Pero por qué se vio el W3C en la necesidad de crear la especificación para las CSS? ¿Qué significado tiene para mí que me dedico a crear sitios web y aplicaciones basados en HTML? Bueno, a mi parecer la necesidad para las CSS y sus ventajas resultantes se pueden dividir en tres áreas principales: flexibilidad, reproducción y accesibilidad.

Flexibilidad

Estoy seguro que casi todo diseñador y desarrollador web ha experimentado ese momento de pánico cuando después de disponer esmeradamente una página con numerosas tablas anidadas y todo , viene el cliente y le dice que necesita hacer un "pequeño" cambio. Y podría ser que "sólo" le pidiera "mover esa imagen un poquito a la izquierda" o podría ser algo más dramático como "no me gustan esos encabezados, ¿podríamos agrandar la fuente... y ya que estamos en eso, podríamos aprovechar para cambiarles el color también?" Si sólo tiene un número limitado de páginas, puede recuperar el aliento y pasarse como una hora haciendo esos molestos cambios. Pero si se trata de sitios grandes, lo que no sería nada raro, un cambio sencillo se convierte en todo menos en sencillo.

¿Qué es lo que produce el pánico en estas situaciones? La marcación, que define el aspecto de nuestras páginas en realidad forma parte de las propias páginas. Para ver una ilustración, tome cualquier página de uno de sus sitios y cuente el número de etiquetas font y table. Si pudiera quitar esa marcación del flujo, o el código, o la página en sí, y todavía mejor, si pudiera externalizarla, podría hacer los cambios en un lugar centralizado. Ese es el trabajo de las CSS.

Al diseñar sus páginas utilizando una sola, o incluso varias, hojas de estilo externas, puede aplicar esos cambios al sitio con sólo modificar la hoja de estilo y luego simplemente cargar la versión modificada.

Imagínese lo difícil que sería mover la navegación del sitio de la izquierda de la página a la derecha en un formato tradicional basado en tablas. Esto le llevaría horas de trabajo repetitivo y tedioso. Si, por el contrario, hubiera escogido utilizar los atributos de posicionamiento de las CSS conocidos como CSS-P para diseñar sus páginas, un cambio sencillo al atributo "flote" o al atributo "position" en la hoja de estilo externa actualizaría la página. Y hay una ventaja adicional: habrá actualizado todas las páginas que utilizan esa hoja de estilo ¡en todo el sitio!

Reproducción

Desde que la banda ancha se ha convertido en cosa de todos los días, muchos desarrolladores han dejado de considerar el tiempo que se necesita para reproducir una página en un navegador. Sin embargo, para muchos de ustedes, es importante recordar que las audiencias a las que se dirigen, todavía navegan en el web a través de una la línea telefónica. La disposición tradicional basada en tablas, es una de las causas principales de la carga lenta de las páginas. Esto sucede porque el navegador, una vez que recibe la página del servidor, debe primero examinar y "entender" la gama compleja de tablas anidadas. Primero tiene que ubicar la pieza de contenido que esté anidada más al fondo y luego ir para atrás en el código hasta alcanzar el contenedor que esté más arriba, la etiqueta de cuerpo body. Sólo una vez completado este trayecto es que el navegador puede comenzar a producir el contenido en la pantalla.

Cuando usa las CSS, el navegador puede comenzar de inmediato el proceso de reproducción al recibir el contenido del servidor porque de haber, hay muy poca marcación de presentación en la página.

También hay una ventaja de reproducción oculta cuando se utilizan hojas de estilo externas. En el modo tradicional basado en tablas, los navegadores deben recuperar, analizar y reproducir cada página individualmente. En otras palabras, el navegador trabaja igual de duro para el despliegue de la página número 30 del sitio que para la primera página.

No obstante, si el sitio utiliza hojas de estilo externas para su presentación, la primera página del sitio incita al navegador a guardar en la memoria caché los archivos de hojas de estilo vinculados que utiliza la página. Esto quiere decir que todas las páginas subsiguientes en el sitio que utilicen esas hojas de estilo se van a cargar aun más rápido puesto que el navegador ya tendrá dichas hojas de estilo en caché.

El último beneficio de reproducción me recuerda a la película "Amadeus", en la cual Mozart le pregunta al emperador que qué pensó de sus óperas. El emperador le responde que estaban buenas, pero tediosas. Por insistencia de Mozart, el emperador explica que el problema era sencillamente que había "demasiado notas." Con el diseño web, esto también puede ser un problema, nada más que en este caso las notas son el código HTML en sí. Cuanto más código hay, más tiempo necesita el navegador para entender e interpretar la página.

Seguramente todos han oído lo que se dice de algunas aplicaciones de oficina que escriben un código notablemente malo, plagado de información superflua que no tiene nada que ver con la reproducción de la página en el documento. Y aunque ustedes, como usuarios de Dreamweaver, no tengan que tratar con esto, podrían de todas maneras pecar de poner "demasiadas notas". El diseño típico basado en tablas es un ejemplo primordial.

Al implementar las CSS en sus diseños, comenzará a disminuir la cantidad de código que el cliente debe descargar. Con sólo quitar todas las etiquetas de fuente de algunas páginas, se puede reducir la cantidad de código drásticamente. Y si se toma el tiempo de cambiar completamente a diseños CSS-P, en muchos casos, se puede reducir la cantidad de código ¡en un 50% o más! Menos código, mayor rapidez para cargar páginas.

Accesibilidad

Mucho se habla de la accesibilidad hoy en día. La mayoría de los desarrolladores saben que deberían estar pensando en crear sitios más accesibles, pero, en gran medida, sólo los desarrolladores que tienen que crear sitios para instituciones gubernamentales o educativas se han visto forzados a hacerlo. Al pensar en la accesibilidad, la gran mayoría de los desarrolladores piensan que sólo es cuestión de añadir cosas como atributos alt a las imágenes. Pero es eso y mucho más, y las CSS puede facilitarle el trabajo de crear sitios accesibles.

Uno de los principales problemas de la accesibilidad, y para el cual las CSS pueden realmente marcar una diferencia, es en cómo la tecnología de asistencia como un lector de pantalla "lee" una página. En el mundo tradicional basado en tablas, un lector de pantalla se enfrenta a un desafío indecible de saber cómo leer una página. Piense lo confuso que sería para un lector de pantalla que se encuentra con una tabla profundamente anidada: ¿lee el contenido, o se lo salta? Y si se lo salta, ¿cómo regresa al contenido más tarde?

Al ver una página, usted puede ubicar rápidamente el contenido de la página que le interesa e ignorar la navegación u otro contenido en la parte superior de la página. Una persona con dificultades visuales no se puede dar ese lujo. Tiene que esperar que el lector de pantalla analice sintácticamente toda la información superflua entre la parte superior de la página y el contenido que sí le interesa.

Por supuesto, existen técnicas para que el lector se salte la navegación, pero éstas por lo general requieren vínculos a las imágenes de la barra de navegación u otro contenido. Estas técnicas dan buenos resultados, pero a la vez, pueden ser confusas y otras visitas videntes las pueden ver también. Con las CSS, se pueden definir elementos completamente invisibles en la página: elementos que son invisibles a otras visitas y a su ratón. El lector de pantalla puede utilizar estos elementos para navegar rápida y eficientemente por todo el documento.

Con las CSS y su falta de marcación de presentación, lo único que el lector de pantalla encuentra es el propio contenido. Además, al diseñar con CSS-P, comenzará a concentrarse en el "flujo" del contenido en sí. Y comienza a considerar el orden lógico en la página.

Al leer este documento, ha seguido el "flujo" de información. Pero en ese ejemplo de tabla anidada, si estuviera utilizando una disposición de muchas columnas, este párrafo podría perfectamente haber estado en la esquina superior derecha de la página y, en ese caso, el lector de pantalla no hubiera sabido que tenía que esperar hasta el final del artículo para leerlo.

Con las CSS-P, el navegador también podría desplegar este párrafo en la esquina superior derecha de la ventana del navegador, pero la posición del párrafo en el html del documento todavía estaría aquí mismo donde lo está viendo si se fija en el código fuente del documento. Esto propicia una experiencia mucho mejor, más accesible.

Conclusiones y próximos pasos

Ahí está todo. Espero haber podido explicar algunos de las ventajas únicas de utilizar CSS en sus andanzas web. Sin duda, queda mucho por aprender y por eso les recomiendo que lean los otros excelentes artículos sobre CSS que podrá encontrar aquí en el Centro para desarrolladores de Macromedia y que le pueden ayudar a entender las ventajas de las CSS y guiarlo en el proceso de implementarlas en sus diseños. En las próximas semanas y los próximos meses, voy a ofrecer más tutoriales sobre las CSS. Mientras tanto ¡que disfruten del arte del estilo!