Hojas de estilo alternativas

Una página web puede tener enlazadas varias hojas de estilo distintas para que el usuario elija cuál se aplica.

Definir hojas de estilo alternativas

En una página web, la etiqueta <link /> situada en la cabecera (<head>) indica la ubicación y nombre de la hoja de estilo enlazada mediante el atributo href :

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

Se pueden enlazar dos o más hojas de estilo, con lo que el código fuente contendrá tantas etiquetas <link /> como hojas enlazadas:

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

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

En este caso, el navegador aplica simultáneamente las dos hojas de estilo a la página web. Si un elemento está definido en las dos hojas, el navegador hará lo que diga la última hoja de estilo de la lista.

Para que sean hojas de estilo alternativas, es decir, para que el usuario pueda elegir en el navegador qué hoja de estilo quiere aplicar, es suficiente con que los enlaces a las hojas de estilo tengan el atributo title:

<link href="nombre_de_archivo_1.css" rel="stylesheet" type="text/css" title="Hoja 1"/>

<link href="nombre_de_archivo_2.css" rel="stylesheet" type="text/css" title="Hoja 2"/>

De acuerdo con la recomendación HTML 4.0, las hojas de estilo alternativas deberían estar definidas de la manera siguiente, pero tanto Firefox como Internet Explorer no lo necesitan:

sólo una de las hojas de estilo debería tener el atributo rel="stylesheet" y que las demás deberían tener el atributo rel="alternate stylesheet".
las hojas de estilo deberían tener el atributo title, para que en el navegador se pueda elegir entre una u otra.

<link href="nombre_de_archivo_1.css" rel="stylesheet" type="text/css" title="Hoja 1"/>

<link href="nombre_de_archivo_2.css" rel="alternate stylesheet" type="text/css" title="Hoja 2"/>

Hojas de estilo alternativas en Firefox o Internet Explorer

La selección de hojas de estilo se realiza en Firefox mediante el menú Ver > Estilo de página y en Internet Explorer mediante el menú Ver > Estilo. Las opciones de este menú dependen de los atributos de las hojas de estilo enlazadas.

si la hoja (u hojas) de estilo enlazada tiene el atributo rel="stylesheet" , pero no tiene el atributo title, el menú muestra las opciones: "Sin estilo" y "Estilo de página básico". Si se elige "Sin estilo", Firefox muestra la página sin aplicar la hoja de estilo. Si se quiere volver a aplicar la hoja de estilo, hay que elegir "Estilo de página básico".

<link href="css/estilo.css" rel="stylesheet" type="text/css" />
si hay una sola hoja de estilo enlazada y tiene el atributo title, el menú muestra las opciones: "Sin estilo" y el título de la hoja de estilo. Si se elige "Sin estilo", Firefox muestra la página sin aplicar la hoja de estilo. Si se quiere volver a aplicar la hoja de estilo, hay que elegir la otra opción.

<link href="fuentes_roma.css" rel="stylesheet" type="text/css" title="Color" />

si hay varias hojas de estilo enlazadas y todas tienen el atributo title, el menú muestra las opciones: "Sin estilo" y todos los títulos de las hojas de estilo. Si se elige "Sin estilo", Firefox muestra la página sin aplicar la hoja de estilo. Si se quiere aplicar cualquier hoja de estilo, hay que elegir la opción correspondiente.

Hojas de estilo alternativas con JavaScript

Como Internet Explorer 7 y anteriores no permitían seleccionar las hojas de estilo alternativas o desactivar la hoja de estilo, hubo gente que ideó un mecanismo similar pero programado en JavaScript que sí que funcionara en IE. Existen varias maneras de hacerlo y la explicación que se ofrece a continuación está basada en la idea de Paul Sowden. A medida que vayan desapareciendo las versiones antiguas de IE, irá desapareciendo la necesidad de recurrir a "trucos" así.

La idea es que al cargar la página, se identifiquen las hojas de estilo alternativas que están declaradas en la página web y asociar eventos a algunos elementos que provoquen el cambio de la hoja de estilo aplicada.

Para que el script se cargue junto con la página, se debe insertar un bloque <script> en la cabecera <head> que apunte al archivo styleswitcher.js, que debe estar en la ruta indicada en el atributo src (descarga styleswitcher.js).

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

Las hojas de estilo que vayan a utilizarse se declaran como se hace cuando se definen hojas de estilo alternativas.

<link href="nombre_de_archivo_1.css" rel="stylesheet" type="text/css" title="Hoja 1"/>
<link href="nombre_de_archivo_2.css" rel="alternate stylesheet" type="text/css" title="Hoja 2"/>

Para cada hoja de estilo se debe crear un enlace "ficticio" que no apunte a ningún destino, pero que tenga establecido el atributo de evento onclick (o cualquier otro evento) que llame a la función que se encarga de cambiar la hoja de estilo (el argumento de la función es el atributo title del enlace a la hoja de estilo).

<a onclick="setActiveStyleSheet('Hoja 1'); return false;" href="">Texto</a>
<a onclick="setActiveStyleSheet('Hoja 2'); return false;" href="">Texto</a>

Al hacer clic en esos enlaces ficticios, se cambiará automáticamente de hoja de estilo.

Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 27 de octubre de 2009

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.