Interactuando con CSS

Vamos a ver como podemos cambiar de hoja de estilo dinamicamente en nuestra página web con un simple código Javascript. Así. les permitirás escoger a los usuarios la apariencia que más le guste cuando visiten tu página facilmente.

Para empezar, todos sabemos como se carga en un archivo HTML nuestra hoja de estilos (sino mal vamos :P):

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

Este primer metodo crea una hoja de estilos persistente. Esto significa que la hoja de estilos será cargada para usarla en la página web. La mayoria de las hojas de estilo usadas en internet son cargadas de este modo, escribiendo ese codigo en la cabecera (HEAD) del documento HTML. Las propiedades de la hoja de estilos cambian cuando añadimos un pequeño atributo, por ejemplo:

<link rel="stylesheet" type="text/css" href="preferred.css" title="ejemplo1" />

Este código carga una hoja de estilos, como veis, igual que el anterior, simplemente que está hoja de estilos está acompañada de una propiedad title, lo cual indica que es una hoja de estilos preferida. La unica diferencia con las hojas de estilo persistentes es que esta hoja de estilos puede ser descargada cuando otra hoja de estilos está cargada. Asi, multiples hojas de estilo pueden tener el mismo titulo, y, por lo tanto, pueden ser cargadas y descargadas a la vez. Ahora, lo que deberemos saber, es como definir una hoja de estilos alternativa. El código es parecido a este:

<link rel="alternate" type="text/css" href="alternate.css" title="ejemplo2" />

Como puedes ver, el atributo rel ha sido cambiado a alternate. Por defecto, las hojas de estilo alternativas son cargadas por el navegador, sin embargo, son deshabilitadas. Muchas hojas de estilos alternativas pueden tener el mismo titulo, y por lo tanto funcionarán como un grupo, como vimos arriba. A continuación, veremos como cambiar entre las hojas de estilo preferidas y las alternativas.

Necesitaremos varias funciones Javascript para escanear a traves de los tags, habilitar/deshabilitar hojas de estilo, identificar cual está activa y guardar la hoja de estilos actual en una cookie para que permanezca posteriormente. Las cookies no son el proposito de este articulo, por lo que aceptaremos que los ficheros con las funciones Javascript de Peter-Paul-Koch y Paul Sowden hacen estas funciones magnificamente. Para no liarnos demasiado con Javascript, lo unico que tienes que hacer es bajarte el archivo styleswitcher.js e incluirlo en tu página HTML con el siguiente código (lo insertaremos en la cabecera de la pagina (HEAD)):

<script type="text/Javascript" src="styleswitcher.js"></script>

Para acabar, lo unico que nos falta es crear enlaces en nuestra pagina para controlar las hojas de estilo. Para hacer esto necesitar aplicar un atributo onclick en cada enlace al cual se le pasa los valores definidos por la funcion en el archivo JS. Es bastante sencillo, aqui tienes el codigo que cambia entre 2 hojas de estilo, una llamada ejemplo1 y otra llamada ejemplo2 (¿original e? :P):

<a href="#" onclick="setActiveStyleSheet('ejemplo1'); return false;">cambiar a css ejemplo1</a>

<a href="#" onclick="setActiveStyleSheet('ejemplo2'); return false;">cambiar a css ejemplo2</a>

Ahora ya tienes todo lo necesario para crearte tu propia página con hojas de estilo dinamicas.

Un saludo,

Recopilado de: A list apart: Working with alternate style sheets