Ideas Fugaces - » Hojas de Estilo Alternativas

Una página web puede disponer de varias hojas de estilo que se adapten a las diferentes necesidades o preferencias del usuario. Desde el punto de vista de la accesibilidad y la funcionalidad esto es una gran ventaja. Para alternar entre varios estilos, primero hay que confeccionar las hojas de estilos que se deseen y luego añadir en la cabecera sus respectivos enlaces (link), especificando en cada uno si se trata de hojas de estilo persistentes, preferentes o alternativas.

Hoja de estilo persistente: se hace el atributo rel igual a «stylesheet» y no se establece el atributo title.
Hoja de estilo preferente: se hace el atributo rel igual a «stylesheet» y se da un nombre a la hoja de estilo mediante el atributo title.
Hoja de estilo alternativa: se hace el atributo rel igual a «alternate stylesheet» y se da un nombre a la hoja de estilo mediante el atributo title.

Luego se necesita un agente de usuario para intercambiarlos. En nuestro ejemplo será JavaScript, pero ya los navegadores como Firefox comienzan a asumir este papel. Sólo hay que ir al Menú / Ver / Estilos de la Página /… y seleccionar algunos de los que se hayan establecido.

Ejemplo 1: Estilos Normal y Extendido

Este ejemplo es una práctica y variación del que he encontrado en uno de los magníficos tutoriales de la Web de Illasaron. Aquí se han definido dos estilos para mostrar la imagen y el texto, de manera compacta al comienzo y extendida al pusar el botón (+). En el modo extendido la imagen ocupará el mayor espacio posible y el texto se colocará debajo, incluyendo también una parte que antes estaba oculta.

La Bahía de la Habana y la fortaleza de
«El Morro»

( … ) Desde el lugar en el que se encontraba, la ciudad de la Habana adquiría en dirección a la bahía una perspectiva helénica de colores redivivos, con tantas columnas dóricas, jónicas y corintias que a cualquier buen observador le hubiera parecido excéntrico.

A todas horas la gente acudía con diferentes fines, pero sobre todo abundaban los que pretendían abandonarse en la contemplación del mar y sus meneos. Merodeaban por allí parejas mixtas en edad y sexo, madres que paseaban a sus hijos, habituales amantes del sedal y algunos silenciosos pregoneros. A escasos metros y formando un círculo en torno a una botella de ron, cinco hombres intentaban parafrasear con sus gaznates aquella máxima que aconseja combatir el fuego con fuego. En general era un ambiente tranquilo, turbado únicamente por algún amago de circulación del que eran responsables: bicicleteros, taxistas, boteros, un camión ruso que pasó dejando una humareda… ocasionales patrulleros.

«La Jinetera», 11/2002

Recuerda que sólo los Estilos Alternativos son excluyentes, de modo que si quieres que se aplique un estilo sin incluir ningún elemento del otro, ambos deben poseer el atributo rel=»altelnate stylesheet.» Puedes obtener más información sobre Hojas de Estilo Externas en los siguientes:

Enlaces Relacionados

W3C | illasaron.com | conclase.net

Mostrar / Ocultar el Código

(+/-)

Script en la Cabecera
( ... )

<link href="normal.css" rel="stylesheet" type="text/css" />
<link rel="alternate stylesheet" type="text/css" href="extendido.css" title="alternativo" />
<script type="text/javascript" src="estilo_alternativo.js"></script>
</head>
Documento Javascript
//  estilos_alternativos.js

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
Estilos CSS
/*    compacto.css    */

div.imagen {
width: 40%;
border: thin silver solid;
margin-right: 1em;
padding: 0.5em;
float: left;
}

div.imagen img {
padding:0!important;
margin:0!important;
border:none!important;
}

div.imagen p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}

img.escala {
width: 100%;
}
div.texto {
width: 55%;
text-align:justify;
vertical-align:top;
float: left;
}

#contenedor {
width:100%;
margin-right:auto;
margin-left:auto;
margin-bottom:1em;
overflow:auto;
}

h1 {
margin:0;

}

div.texto p    {
margin:0;
}

.leer_mas    {
display:none;
}

#mostrar_ocultar {
display: none; // Este valor hace referencia a que cuando se carge la pagina se encuentre oculto
}

/*  extendido.css  */

div.imagen {
border:thin solid silver;
padding:0.5em;
width:100%;
}

div.imagen p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}

img.escala {
width: 100%;
}

div.texto {
width: 100%;
padding:0.5em;
text-align:justify;
margin:0;
vertical-align:top;
}

#contenedor {
width:100%;
margin-top:1em;
}

h1 {
margin-bottom:0.5em;
}

div.textop p    {
margin:0;
}
.leer_mas    {
display:block;
}

div.imagen img {
padding:0!important;
margin:0!important;
border:none!important;
}

L	M	X	J	V	S	D
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30