| Buenos dias gentecilla.
Me quiero sumar
a la tarea de nuestros gurús
del foro en la exposición de
temas educativos, para el enriquecimiento
en cultura weberil de nuestra comunidad.
Así que voy a exponer una curiosidad
que asaltó mi espíritu
el otro dia que perdía el tiempo
(mientras me fumaba el cigarro de
las 11) visitando la web del Forum
Barcelona 2004.
Resulta que me
encontré en la parte superior
de la web tres pequeños iconos
en forma de 'A' de diferentes tamaños.
Cual fue mi sorpresa que haciendo
un "clis" encima de cada
uno de ellos, se aplicaban diferentes
hojas de estilo en función
del tamaño de letra. Claro
que para eso ya está la opción
del browser de cambiar el tamaño
del texto (sin olvidar que cuando
hay estilos css esto no funciona),
pero a la vez esto puede abrir muchas
puertas más, debido a la versatilidad
de las hojas de estilo. "¿Cómo
@#1 lo hacen?" me pregunté
angustiado...
Así que,
raudo y veloz, destripé el
código fuente, mientras que
por otro lado abrí Google e
hice una pequeña investigación,
y esto fue lo que salió.
Imaginemos tres
hojas de estilos, en diferentes ficheros,
veanse hoja01.css,
hoja02.css y hoja03.css
En cada una de
ellas definimos las mismas clases
pero con distintos atributos, por
ejemplo, imaginemos una clase
".texto",
que podemos aplicar al grueso de nuestra
página web, es decir, en la
hoja01.css
.texto
{
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
text-decoration: none;
} |
En la hoja de
estilos
hoja02.css:
.texto
{
font-family: Georgia, "Times
New Roman", Times, serif;
font-size: 10pt;
color: #0000FF;
text-decoration: none;
} |
Y en la hoja
de estilos hoja03.css
.texto
{
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 14pt;
color: #FF0000;
text-decoration: none;
} |
Nuestra página
debe tener linkadas las tres hojas
de estilo entre las etiquetas <head></head>
pero con una sutil diferencia:
<link
href="hoja01.css" rel="stylesheet"
type="text/css" title="hoja1">
<link href="hoja02.css"
rel="alternate stylesheet"
type="text/css" title="hoja2">
<link href="hoja03.css"
rel="alternate stylesheet"
type="text/css" title="hoja3"> |
Esta diferencia
estriba en el atributo rel, que establece
la hoja de estilos activa, y las hojas
de estilo alternativas. Para hacer
una hoja de estilos esté activa,
el atributo rel se fija a "stylesheet"
y a la hoja de estilos se le asigna
un nombre con el atributo title, mientras
que a las hojas de estilo alternativas,
en el atributo rel, se le fija
"alternate stylesheet".
Vale, hasta aquí
todo sencillito. Ahora necesitaremos
de un script que establezca como activas
las diferentes hojas de estilo. Para
no alargar mucho el tema, pongo la
función que nos va a realizar
esta cuestión:
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;
}
}
} |
De esta manera,
desde tres enlaces que pueden ser
texto o imágenes, incluidas
en el cuerpo principal de nuestra
web, podemos referenciar a las tres
diferentes hojas de estilo llamándolas
por su nombre
(title);
de esta forma:
<a href="#"
onclick="setActiveStyleSheet('hoja1');
return false;">hoja01</a>
<a href="#" onclick="setActiveStyleSheet('hoja2');
return false;">hoja02</a>
<a href="#" onclick="setActiveStyleSheet('hoja3');
return false;">hoja03</a> |
Y conseguido,
premio para el menda!!!! mi angustia
se disipa, soy feliz, me enciendo
otro cigarro para celebrarlo...
En esta página
http://www.alistapart.com/articles/alternate/
podeis leer un artículo sobre
esto, y muchas más cosas, como
agregar cookies, y descargar un fichero
.js con todas estas funciones listas
para usar.
Y eso es todo
=)
Un saludo |
