Cambiando de CSS con un click

¿Cómo demostrar el potencial de las hojas de estilo?

Nada mejor que mostrarlas en acción permitiendo que el usuario elija una CSS entre varias disponibles. Mejor aún, consiguiendo que a partir de ese momento la CSS que escogió siga aplicándose a todas las páginas que visite.

El desafío consiste en utilizar en todo momento la misma página HTML y solamente cambiar la referencia a las distintos archivos .CSS con las hojas de estilo. De este modo es posible observar cómo una página puede ser totalmente alterada en su aspecto visual sencillamente cambiando sus estilos mientras se mantiene intacta su estructura formal.

El problema es guardar de algún modo la selección del usuario y pasar esa información a las páginas antes de que éstas sean mostradas. Bastaría con completar la referencia dentro del encabezado de cada página con el nombre del archivo .CSS elegido:

<link rel="stylesheet" type="text/css" href="¿¿¿¿¿?????.css">

Lógicamente esto no es posible de conseguir con páginas estáticas, de modo que es necesario recurrir a un lenguaje de programación, como PHP.

Debo aclarar que para lograr estos cambios de estilo no es imprescindible que las páginas sean archivos PHP. Aquí la programación se utilizan solamente para el propósito descripto anteriormente: conservar el nombre del archivo .CSS seleccionado y escribirlo en la referencia de la página HTML antes de que ésta sea mostrada.

Todas las modificaciones que se observan en el documento al cambiar la CSS son provocados por las propias hojas de estilo y PHP no tiene más intervención que la ya mencionada.

¿Por qué PHP?

Aclaro que no soy un experto en programación ni mucho menos pero me he interesado por PHP para construir aplicaciones web dinámicas por varias razones: es un software de código abierto (se puede obtener gratuitamente) que puede ejecutarse en las plataformas más usadas (Unix, Linux, Windows, Solaris, etc.).

Además, incluye soporte para un gran número de bases de datos y otras tecnologías como Java y XML y, según dicen quienes saben, es de fácil aprendizaje.

Pero lo que me decidió finalmente fue la nota "Authenticate and Track Users with PHP" de Julie Meloni (que obtuve en http://www.phpbuilder.com/ ) donde se explica el manejo de sesiones en PHP4 y que me dió la idea para desarrollar este sistema.

¿Qué son las sesiones?

El uso de sesiones es una forma de mantener información específica de un usuario sin necesidad de programar cookies o de realizar llamadas a una base de datos.

En términos temporales, una sesión es la duración de la visita del usuario. En términos de programación es un objeto identificado por una cadena (por ejemplo: 940f8b05a40d5119c030c9c7745aead9) que puede almacenar todo tipo de variables y valores.

La cadena identificatoria es enviada a la máquina del usuario a través de una cookie llamada PHPSESSID. En el servidor, un archivo temporal coincidente es creado con el mismo nombre. Cada objeto sesión contiene las variables registradas y el archivo creado en el servidor las almacena junto con los valores especificados.

Como estos valores y las variables no son recogidas en una base de datos, no se requiere ningún recurso adicional del sistema.

Manos a la obra

Los ingredientes necesarios son: las páginas HTML, varios archivos .CSS con los distintos estilos que vamos a permitir seleccionar y un servidor con soporte para PHP4 para montar nuestra web (toda receta tiene al menos un ingrediente difícil).

Al comienzo de cada página, antes de cualquier otro código, colocamos el siguiente script:

<?
   session_start();
     if (!$PHPSESSID) {
     session_register('micss');
     $micss = "default";
     } else if ($sel_css) {
     $micss = $sel_css;
   }
?>

Veamos esto en detalle: si no existe ninguna sesión abierta (if (!$PHPSESSID)) se comienza una y se registra la variable que usaremos luego (session_register('micss')). Luego le asignamos a la variable $micss el valor default que es el nombre de nuestro archivo .CSS predeterminado.

Así nos aseguramos de que siempre exista una hoja de estilo aplicada a las páginas. Luego se verifica que exista la variable $sel_css (ya veremos cómo se puede definir mediante el formulario de selección) y en ese caso le asignamos su valor a $micss (en lugar de default).

Repasemos: si no existe una sesión, iniciamos una y registramos la variable $micss. Inmediatamente le asignamos el valor default a esa variable (pero se lo cambiamos si el usuario ha realizado otra selección).

Ahora necesitamos un formulario dentro de las páginas para darle la oportunidad al usuario de cambiar el estilo:

<FORM METHOD="POST" ACTION="<? echo $PHP_SELF ?>">
   <select name="sel_css">
   <option value="default" selected>Default</option>
   <option value="dibujo">Dibujo</option>
   <option value="grafo">Grafo</option>
   <option value="metal">Metal</option>
   <option value="sistema">Sistema</option>
   </select>
   <input type="submit" name="submit" value="OK"></p>
</FORM>

El nombre de la lista de selección es sel_css (la variable cuya existencia comprobamos en el script anterior) y los posibles valores son los nombres de los archivos .CSS que hemos preparado.

Observen que la fórmula $PHP_SELF utilizada en la propiedad ACTION es la manera de referenciar la propia página que contiene el formulario. De este modo, cuando el usuario presiona el botón "OK" se vuelve a abrir la página con la nueva variable.

Bien, ya tenemos el modo de cambiar los valores de la variable $micss según la elección del usuario pero ¿dónde la usamos? En la referencia a la hoja de estilo externa:

<link rel="stylesheet" type="text/css" href="<? echo "$micss"; ?>.css">

Si no hubiera ninguna selección por parte del usuario, el valor para $micss sería default y la línea quedaría así:

<link rel="stylesheet" type="text/css" href="default.css">

Pero si existe una selección (supongamos que el usuario eligió la opción metal) la línea sería:

<link rel="stylesheet" type="text/css" href="metal.css">

Y eso es todo. Lo demás corre por cuenta de los estilos que hayamos definido en nuestras CSS (default.css, metal.css, dibujo.css, etc.).

Una cosita más...

Descubrí que había un inconveniente al regresar a una página ya visitada por cuanto es común que el navegador las conserve en su memoria caché para acelerar la navegación. De este modo, si luego de pasar por varias páginas cambiamos la hoja de estilo y regresamos a una ya visitada, el navegador no muestra la nueva versión de la página sino la que tiene almacenada en su memoria caché (con la antigua hoja de estilo).

Este inconveniente se soluciona colocando en la sección <HEAD> de las páginas los siguientes "meta tags":

<META HTTP-EQUIV="Expires" CONTENT="Mon, 06 Jan 1990 00:00:01 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Resultados

Estas son cuatro pantallas de mi página de inicio tras aplicarles otras tantas hojas de estilo. Es difícil creer que se trata siempre del mismo documento ¡pero lo es!

Como tienen un propósito demostrativo, el acento está puesto en extremar las diferencias antes que en buscar la utilidad de cada diseño. Un uso más lógico sería proporcionar una CSS optimizada para Netscape, otra para IExplorer, para distintas resoluciones de pantalla y para cada sistema operativo.

Finalmente, si le interesa, estas son las hojas de estilo que he utilizado en mis ejemplos: