Alternando Hojas de Estilo

Existen tres tipos de stylesheets externas en un sitio: “persistent” (persistente), “preferred” (preferida) y “alternate” (alternativa).
en el head:
estilo persistente, el de toda la vida
<link rel="stylesheet" type="text/css" href="estilo.css" />
estilo alternativo, el que veremos:
<link rel="alternate stylesheet" type="text/css" href="estilo2.css" title="estilo2" />

a los estilos alternos debemos ponerle el atributo de título (title="título"), para después poder “llamarlos”,
nota: los estilos persistentes no necesitan título, pero como vamos a alternarlo con otro y después queremos volver a él, deberemos ponérselo


bien, ya tenemos una par de estilos y los hemos incluído en el head, ahora necesitamos un script de “javascript” que nos permita realizar el cambio correctamente: <a styleswitcher.js (de http://www.alistapart.com/articles/alternate/)

lo incluímos en el head:
<script type="text/javascript"
src="styleswitcher.js"></script>

e insertamos este código en el html, donde queramos aparezcan las opciones de cambio de css:

<a href="#"
onclick="setActiveStyleSheet('estilo_default', 1);
return false;">Cambia a estilo_default</a>

<a href="#"
onclick="setActiveStyleSheet('estilo1', 1);
return false;">Cambia a estilo1</a>

Listo.
el head completo queda así:

<link rel="stylesheet" type="text/css" href="estilo.css" media="screen" title="estilo_default" />


<link rel="alternate stylesheet" type="text/css" media="screen" href="estilo2.css" title="estilo1" />

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

fin.

ejemplo final: www.quinti.tk

¿qué alternar? ¿por qué? ¿qué puedo cambiar en el segundo estilo?

principalmente por Accesibilidad.
podemos hacer una copia de nuestro estilo.css principal (el persistente), y únicamente le aumentamos en 2 px los tamaños de fuente, así facilitamos la navegación a personas con problemas de visión. Del mismo modo, podemos únicamente cambiar a un tipo de letra más legible, (con serifs) (ejemplo: ejemplo)
Aunque también podemos hacer todos los cambios css que queramos, que son muchos: podemos cambiar completamente el estilo de nuestro sitio, hacer diferentes versiones, (versión clara, oscura, etc) existen mil posibilidades.

Usuarios que han visto este tema también han visto...

- Pseudoclases de CSS
- Opacity en CSS
- Estilos en formularios: Bordes llamativos para campos de formulario en CSS
- Cómo utilizar el Opacity con CSS
- Como configurar el color de las barras de desplazamiento

- Versión imprimible de este documento

- Enviar por e-mail este documento