Hojas de estilo alternativasHojas de estilo alternativasUna página web puede tener enlazadas varias hojas de estilo distintas para que el usuario elija cuál se aplica. En Firefox, el menú permite elegir la hoja de estilo a aplicar. Internet Explorer no permite elegir entre hojas de estilo alternativas, aunque se puede simular este mecanismo a través de JavaScript.
Amaya no permite elegir entre hojas de estilo alternativas, ni tampoco hay opciones en los menús para crear las etiquetas correspondientes, por lo que hay que que utilizar la vista Estructura o editar el código fuente para incorporar hojas de estilo alternativas a una página web.
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" />
Como el atributo rel tiene el mismo valor (stylesheet), 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.
En Amaya se pueden enlazar o borrar enlaces a todas las hojas de estilo utilizando los menús y .
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 necesario que:
<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"/>
Como navegador, Amaya no maneja hojas de estilo alternativas, aunque puede preparar el código para que las hojas de estilo aternativas funcionen en el navegador. Para ello, se puede empezar enlazando todas las hojas de estilo (en Amaya se aplica la última añadida). A continuación, se debe modificar el atributo rel y añadir o modificar el atributo title.
Se puedes editar el código fuente de la página web o utilizar la vista estructura (que se abre con el menú ). Una vez en la vista estructura, hay que seleccionar la etiqueta link y en la ventana de herramientas Atributos, editar los atributos rel y title.
La selección de hojas de estilo se realiza en Firefox mediante el menú . Las opciones de este menú dependen de los atributos de las hojas de estilo enlazadas.
Mediante JavaScript se puede realizar un mecanismo similar a las hojas de estilo alternativas. Existen varias maneras de hacerlo y esta explicación está basada en la idea de Paul Sowden.
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>.
<head>
. . .
<script type="text/javascript" src="styleswitcher.js">
</script>
. . .
</head>
Se debe crear un enlace "ficticio" que no apunta a ningún destino, pero que tiene establecido el atributo de evento onclick (o cualquier otro evento) que llama a la función que se encarga de cambiar la hoja de estilo (para ello el argumento de la función es el atributo title del enlace a la hoja de estilo).
<a onclick="setActiveStyleSheet('title_de_la_css');
return false;"
href="">Texto</a>
Completar
Autor: Bartolomé Sintes Marco