|
Cambio Dinámico de Hoja de Estilos CSS |
|
|
En este artículo se pretende explicar como poder usar diferentes estilos para una misma página, según las necesidades o dificultades de la persona que la visita.
Se puede cambiar dinámicamente la hoja de estilos CSS con un simple código JavaScript.
Por norma general, las páginas que utilizan una hoja de estilos CSS (Cascading Style Sheets) suelen cargarla utilizando la siguiente línea de código, incluida en la cabecera de la página entre las etiquetas <head> y </head>:
<link rel="stylesheet" type="text/css" href="miestilo.css">
Con éste código, en realidad se carga una hoja de estilos persistente, es decir, que no podremos usar otro estilo diferente para la página. Esto lo podemos cambiar añadiendo a la etiqueta <link> la propiedad title:
<link rel="stylesheet" type="text/css" href="normal.css" title="normal">
De ésta manera, la hoja de estilos CSS es cargada como preferida, pudiendo después cargar otra hoja de estilo, quedando la primera descargada. Para definir una hoja de estilos alternativa, podemos añadir el siguiente código:
<link rel="alternate stylesheet" type="text/css" href="altocontraste.css" title="altocontraste">
Tan solo se han cambiado los atributos rel (para indicar que esta nueva hoja de estilo es la alternativa) y title (para poder referirnos luego a ella). Por defecto, las hojas de estilo alternativas son cargadas por el navegador, aunque deshabilitadas. Pero esto no debe preocuparnos ya que una hoja de estilo no suele sobrepasar los 10Kb de tamaño.
Bien: ahora por defecto se carga la hoja de estilos normal.css y tenemos la alternativa altocontraste.css (por ejemplo). Ahora deberemos incluir la siguiente línea de código también entre las etiquetas de <head> y </head>:
<script type="text/javascript" src="styleswitcher.js"></script>
Esto incluirá el archivo styleswitcher.js, donde se encuentran las funciones JavaScript necesarias para nuestro propósito. Lo puedes descargar haciendo clic aquí.
Por último, nos queda añadir en la parte de nuestra página que creamos conveniente los vínculos para que el usuario pueda cambiar el estilo al hacer clic:
<a href="#" onclick="setActiveStyleSheet('normal'); return false;">Normal</a>
<a href="#" onclick="setActiveStyleSheet('ejemplo2'); return false;">Alto Contraste</a>
En estos hipervínculos, el atributo onclick hace referencia a una función incluida en el archivo styleswitcher.js, a la cual le pasamos el valor del title de la hoja de estilo.
Ver Ejemplo
Sobre el fichero stylesWitcher.js:
Ha sido desarrollado por Peter-Paul-Koch y Paul Sowden. Incluye varias funciones Javascript para escanear a través 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.
El fichero fue obtenido originalmente de:
http://www.alistapart.com/d/alternate/styleswitcher.js
Ni4
http://www.ni4.org/modules.php?name=News&file=article&sid=33
|
Cambio Dinámico de Hoja de Estilos CSS