Haciendo funcionar a las hojas de estilos alternativas

Autor Original: Paul Sowden
URL ORIGINAL: http://www.alistapart.com/stories/alternate/
TÍTULO ORIGINAL: A List Apart: CSS: Making Alternate Style Sheets Work
Traducción al castellano: http://kusor.net/traducciones/ala.es/alternate/


Así, TIENES UN DOCUMENTO XHTML. Has sido un diseñador web bueno y utilizado hojas de estilos para controlar el aspecto de tu documento. Incluso has ido mucho más allá y has creado varias hojas de estilo alternativas para demostrar lo duro que eres.

Estupendo. Pero ahora necesitas un modo cross–browser de elegir dinámicamente entre las distintas hojas de estilos.

Dándole estilo a tu sitio

Las hojas de estilos pueden ser asociadas con los documentos usando una lista de elementos link en la cabecera del documento. Hay tres tipos de relación distintos que pueden tener las hojas de estilos externas con el documento: persistentes, preferridas, y alternativas.

Persistentes

Estas hojas de estilos están habilitadas siempre (siempre están “encendidas”) y son combinadas con la hoja de estilos activa. Pueden utilizarse para compartir reglas comunes a todas las hojas de estilos. Para hacer una hoja de estilos persistente, el atributo rel es fijado a “stylesheet” y no se fija ningún atributo title.

Para hacer persistente la hoja de estilos paul.css, el siguente elemento link debería ser incluido en la cabecera del documento:

Preferidas

Estas hojas de estilo están habilitadas por defecto (están “encendidas” cuando se ha cargado la página). Pueden ser deshabilitadas entonces, si el usuario eleige una hoja de estilos alternativa.

Para hacer una hoja de estilos preferida, el atributo rel se fija a “stylesheet” y a la hoja de estilos se le asigna un nombre con el atributo title.

Varias hojas de estilo preferidas pueden ser agrupadas dándoles atributos title idénticos. Estas hojas de estilos agrupadas serán entonces habilitadas y deshabilitadas juntas. Si se declara más de un grupo de hojas de estilo preferidas, el primero que se declare tendrá preferencia.

Para hacer preferida a paul.css, es añadido un atributo title, dándole al estilo por defecto un nombre.

Alternativas

Estas hojas de estilo pueden ser seleccionadas por el visitante como alternativas a la hoja de estilos preferida. Esto permite al visitante personalizar un sitio y elegir su disposición favorita. También pueden ser utilizadas para accesibilidad (por ejemplo, ALA tiene la hoja de estilos “friendly fonts” que proporciona fuentes mayores).

Para especificar una hoja de estilos alternativa, el atributo rel se fija a “alternate stylesheet” y la hoja de estilos se nombra con un atributo title. Como pasa con las hojas de etilo preferidas, estas hojas de estilos pueden ser agrupadas juntas también dándoles atributos title idénticos.

Usando de nuevo el ejemplo previo; para convertir paul.css en una hoja de estilos alternativa, la palabra “alternate” es añadida al atributo rel.
Notar que estas relaciones sólo se aplican a hojas de estilo externas que hayan sido incluidas usando el elemento link.

Intercambiando estilos

Cuando un documento es cargado inicialmente, las hojas de estilo persistentes y preferidas son aplicadas al documento. Las hojas de estilo alternativas pueden ser seleccionadas por el usuario. El W3C nos dice que el navegador debería proporcionarnos un medio de elegir la hoja de estilos que queremos utilizar, y sugiere que quizá un menú sesplegable o un abarra de herramientas debería ser proporcionada.

Hasta aquí, muy bien. Tenemos varias hojas de estilos y el visitante puede elegir sus favoritas desde un menú. Pero entonces nos encontramos con un prolema. Uno importante. Mozilla proporciona un menú para seleccionar las hojas de estilos que queremos usar bajo un item del menú ver. Pero Microsoft Internet Explorer (MSIE) no proporciona ningún menú. Por lo que tenemos varias hojas de estilos, y ningún modo de acceder a ellas en MSIE.

Aquí es donde un poco de JavaScript puede ser utilizado junto con el DOM para proporcionar un modo mediante el cuál los usuarios de MSIE y Mozilla puedan seleccionar la hoja de estilos que quieran utilizar. Sus preferencias pueden guardarse también en una cookie. Y como estamos utilizando las etiquetas link tal como nos dice el W3C, JavaScript no va a interferir con el menú en Mozilla, y va a degradar grácilmente.

El Script

Primero necesitamos que el script sea capaz de diferenciar entre tres tipos diferentes de hojas de estilo. Esto es relativamente fácil de hacer, dado que sólo necesitamos comprobar dos de los atributos de cada elemento link.

¿Hay algún enlace a un elemento link?
HTMLLinkElement.getAttribute("rel").indexOf("style") != -1 
¿Hay un atributo title?
HTMLListElement.getAttribute("title")
¿Contiene el atributo rel la palabra clave "alternate"?
HTMLLinkElement.getAttribute("rel").indexOf("alt") != -1
Notar que estamos buscando la cadena “alt” porque algunos navegadores aceptan la palabra reservada “alternative” en lugar de “alternate.”

Usando estos tres tipos de chequeo podemos escribir una función para elegir las hojas de estilos. Esto implica buscar todos los elemoentos link en el documento, deshabilitando todas las hojas de estilo preferidas y alternativas que no queremos que estén activas, y habilitando todas las hojas de estilo preferidas y alternativas que queremos que estén activas.

Notar que sólamente los elementos link de hojas de estilo alternativas y preferidas tendrán un atributo title.

La función de cambio tiene el aspecto siguiente:
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;
}
}
}

Cookies

Ahora podemos cambiar las hojas de estilo. Estupendo. Tenemos una página más personalizada. Excelente. Pero no tenemos un sitio personalizado. Las preferencias se aplican sólo a la página actual; cuando la dejemos las preferencias se irán con ella. De cualquier modo, esta situaciónpuede ser rectificada con una cookie.

Para guardar una cookie necesitamos otra función que devuelva la hoja de estilo actual. También necesitamos dos funciones que guarden y lean la cookie.

Para devolver la hoja de estilo actual buscaremos una hoja de estilo preferida o alternativa que esté activa y miraremos su atributo title.

Primero buscaremos de nuevo a través de todos los elementos link en el documento. Entoncdes comprobaremos que el link es una hoja de estilo. Si es así, comprobaremos que la hoja de estilo tiene un atributo title. Esto nos dirá que la hoja de estilo es bien preferida, bien alternativa.

La última comprobación es ver si la hoja de estilo está activa o no. Si las tres búsquedas devuelven verdadero, tendremos la hoja de estilo actual y podremos devolver su atributo title.

La función terminada tiene este aspecto:
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;
}
Como este es un artículo sobre estilos, y las cookies son un tópico completamente diferente, no voy a explicar las funciones de las cookies aquí, pero si voy a incluirlas para tu conveniencia (estas funciones fueron escritas por el autor de ALA Peter-Paul Koch).
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;
}
Para usar estas funciones de cookies, necesitamos agregar onload y onunload event listeners a la ventana.

onLoad

Hay un atributo especificado por el w3c DOM Level 2, “disabled,” que se fija a false cuando una hoja de estilos se aplica al documento. Este atributo es implementado correctamente en Mozilla, pero desafortunadamente no lo es en MSIE.

MSIE tiene un atributo HTML propietario, también llamado “disabled”, que se aplica a los elementos link. Este atribute es fijado inicialmente a false para todos los elementos link.

Para fijar el atributo disabled de MSIE tal como el atributo disabled del DOM Level 2, podemos llamar a la función setActiveStyleSheet() con el nombre de la hoja de estilo preferida.

Para encontrar qué hoja de estilo es la preferida, necesitamos otra función. Dado que esta función es bastante similar a la función getActiveStyleSheet() no voy a explicar como funciona, pero aquí está su aspecto:
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;
}
en la función onload, primero fijamos una variable title. Ésta guardará el valor de la hoja de estilos previa que está almacenada en la cookie, o si no hay ninguna, el título de nuestra hoja de estilos preferida. Para hacer las cosas lógicas, vamos a llamar a la cookie “style.”

Lo siguiente será llamar a la función setActiveStyleSheet() pasándole la variable title como title. Nuestra función onload será algo parecido a esto:
window.onload = function(e) { 
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
Notar que es muy deseable llamar a esta función antes del evento onload, haciendo al documento que “pinte” con nuestro estilo preferido.

Si eleiges hacer esto, asegúrate que dicha función es llamada después de haber definido las otras funciones y que los elementos link han sido definidos.

onUnload

Guardar la cookie en el evento onunload es simple. Todo lo que tenemos que hacer es usar la función getActiveStyleSheet() para que nos devuelva la hoja de estilos activa, y guardarla en una cookie. Usando la función para guardar una cookie tendríamos finalmente algo como esto:
window.onunload = function(e) { 
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

Juntándolo todo

Para usar estas funciones para hacer tu sitio web más sexy, necesitas incluirlas en tu documento. Para hacerlo más fácil, las he puesto todas juntas en un fichero javascript, preparado para que lo descargues y lo añadas a tu sitio.
» Descargar styleswitcher.js

Para incluir el fichero javascript, necesitas añadir un elemento script a la cabecera de tu documento, asegurándote de que está puesto después de todos los elementos link pertenecientes a hojas de estilo que tengas. El código HTML debería tener este aspecto:
 
Para permitir al visitante cambiar la hoja de estilos activa, podrías usar los eventos onClick de javascript. Por ejemplo, para tener la opción de elegir entre dos temas con los títulos “default” y “paul,” podrías usar el siguiente HTML:
change style to default 
change style to paul
Una vez que el visitante ha seleccionado un tema, éste será almacenado en una cookie. Para usar el mismo tema en todo tu sitio web, los mismos elementos link javascript link deberían ser incluidos en la cabecera de cada página del sitio.
¡Eso es todo Gente!

Ahí lo tienes, un sitio web personalizable que utiliza elementos link para enlazar hojas de estilo como el W3C nos ha dicho que deberíamos hacer. ¡Disfrútalo!

::: Paul Sowden tiene 17 años (Londres, Inglaterra), y cree que la web sería un lugar mejor si todos usásemos tecnicas de diseño que cumpliesen con los estándares.

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario: