Fazendo funcionar as folhas de estilos alternativas::

Publicado em: 05/12/2003

Autor: PaulSowden
URL do original: https://www.alistapart.com/stories/alternate/
Título original: ALTERNATIVE STYLE working with alternate style sheets
Traduzido com autorização expressa do autor

Fazendo funcionar as folhas de estilos alternativas

Este tutorial mostra a técnica precurssora das chaves de mudança de estilos e que foi largamente usada no passado para troca de estilos em um site. Embora funcione, hoje existem técnicas mais modernas como, por exemplo, com uso de plugins para a biblioteca jQuery.

Ótimo! Você acaba de produzir um belo DOCUMENTO XHTML. E ainda, como um bom projetista web, criou também folhas de estilo para controlar a aparência do documento. E, mais ainda, você criou várias folhas de estilo alternativas numa demonstração inequívoca da sua rigidez e preciosismo com seus projetos web.

Fantástico. Mas, agora você precisa de um modo, para dinamicamente dizer ao browser para escolher uma entre as várias folhas de estilo que você projetou.

Colocando estilo no seu site

As folhas de estilos externas podem ser associadas aos documentos por intermédio de links colocados dentro da tag <head> do documento. Elas (as folhas de estilo externas) podem ser relacionadas ao documento de três maneiras distintas: persistentes (persistents) preferidas (preferred) e alternativas (alternate).

Folhas de estilos persistentes

Estas folhas de estilos estão sempre habilitadas (estão sempre "on") e são combinadas com a folha de estilos ativa. Elas são usadas para compartilhar regras de estilo comuns com as demais folhas de estilo. Uma folha de estilo é persistente, quando no link colocado no documento o atributo rel é igual a "stylesheet" e não se define nenhum atributo title.

Para fazer persistente a folha de estilos paul.css, o elemento link a incluir na tag <head> do documento teria a seguinte sintaxe:


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

Folhas de estilos preferidas

Estas folhas de estilos estão habilitadas por "default" (estão "on" quando a página é carregada). São desabilitadas quando o usuário seleciona uma folha de estilo alternativa.

Uma folha de estilo é preferida, quando no link colocado no documento o atributo rel é igual a "stylesheet" e também se define um atributo para title.

Para se agrupar várias folhas de estilo preferidas basta definir o mesmo atributo title para as folhas a agrupar. Folhas de estilos agrupadas serão habilitadas e desabilitadas juntas. Se declararmos mais de um grupo de folhas de estilo preferidas, o primero que se declara tem prioridade.

Para fazer preferida a folha de estilos paul.css, o elemento link a incluir na tag <head> do documento teria a seguinte sintaxe:

<link rel="stylesheet" type="text/css" href="paul.css" 
title="bog standard" />

Folhas de estilos alternativas

Estas folhas de estilo podem ser selecionadas pelo visitante como alternativa a folha de estilos preferida. Isto permite ao visitante personalizar o site e eleger seu tema favorito. Também podem ser utilizadas para acessibilidade (por exemplo: o site ALA tem uma folha de estilos "friendle fonts" que proporciona letras maiores).

Uma folha de estilo é alternativa, quando no link colocado no documento o atributo rel é igual a "alternate stylesheet" e também se define um atributo para title .

Assim como para as folhas de estilos preferidas, estas folhas de estilos podem ser agrupadas também dando-lhes atributos title idênticos.

Usando outra vez o exemplo prévio, para converter paul.css em uma folha de estilos alternativa, a palavra alternate é acresentada ao atributo rel.

<link rel="alternate stylesheet" type="text/css" 
href="paul.css" title="wacke" />

Nota: Estas relações só se aplicam a folhas de estilo externas que são incluidas no documento usando o elemento link.

Trocando estilos

Quando um documento é inicialmente carregado, as folhas de estilo persistentes e preferidas são aplicadas ao documento. As folhas de estilo alternativas podem ser selecionadas pelo usuário. As recomendações do W3C preconizam que o navegador deve proporcionar um meio de selecionar a folha de estilos que queremos utilizar, e sugere que seja disponibilizado para isso, ou um menu suspenso ou uma barra de ferramentas.

Até aqui, tudo bem. Temos várias folhas de estilos e o visitante pode selecionar seu favorito pelo menu. Mas, nos deparamos com um problema. Um grande problema. Navegador Mozilla tem um menu para selecionar as folhas de estilos que queremos usar. Mas Microsoft Internet Explorer (MSIE) não tem nenhum menu. Então, temos várias folhas de estilos, e nenhum modo de acessá-las no MSIE.

Aquí entra JavaScript, que utilizado junto com o DOM proporcionará um modo mediante ao qual os usuários do MSIE e Mozilla poderão selecionar a folha de estilos que querem utilizar. As preferências do usuário podem também ser armazenadas em um cookie. E, como estamos utilizando as tags link tal como preconizado pelo W3C, o código JavaScript não interferirá com o menu do Mozilla.

O Script

Primeiro necessitamos que o script seja capaz de diferenciar entre tres tipos diferentes de folhas de estilo. Isto é relativamente fácil de fazer, visto que só necessitamos identificar dois atributos de cada elemento link.

Há um link para uma folha de estilos?


HTMLLinkElement.getAttribute("rel").indexOf("style") != -1

Há um atributo title?


HTMLListElement.getAttribute("title")

O atributo rel contém a palavra "alternate"?


HTMLLinkElement.getAttribute("rel").indexOf("alt") != -1

Notar que estamos procurando a cadeia ("string") alt porque alguns navegadores aceitam a palavra chave alternative no lugar de alternate.

Usando estes tres tipos de checagem podemos escrever uma função para selecionar as folhas de estilos. Isto implica em pesquisar todos os elementos link em um documento, desabilitando todas as folhas de estilo preferidas e alternativas que não queremos que estejam ativas, e habilitando todas as folhas de estilo preferidas e alternativas que queremos que estejam ativas.

Notar que somente os elementos link de folhas de estilo alternativas e preferidas tem um atributo title.

A função de troca tem o seguinte aspecto:

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

Agora podemos alternar as folhas de estilo. Fantástico. Temos uma página personalizada. Excelente. Mas não temos um site personalizado. As preferências se aplicam somente a página atual; quando saimos da página as preferências se vão com ela. De qualquer modo, esta situacão pode ser corrigida com um cookie.

Para armazenar um cookie necessitamos outra função que retorne a folha de estilo atual. Necessitamos também duas funções para armazenar e ler o cookie.

Para retornar a folha de estilo atual buscaremos uma folha de estilo preferida ou alternativa que esteja ativa e determinamos seu atributo title.

Primeiro buscaremos outra vez todos os elementos link no documento. Então comprovaremos que o link é para uma folha de estilo. Se é isso, comprovaremos que a folha de estilo tem um atributo title. Isto nos dirá se a folha de estilo é preferida ou alternativa.

A última comprovação é para ver se a folha de estilo está ativa ou não. Se as tres buscas resultarem verdadeiras, temos a folha de estilo atual e podemos devolver seu atributo title.

A funcão tem 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 é um artigo sobre estilos, e os cookies são um tópico completamente diferente, não vou explicar as funções dos cookies aqui, mas as vou incluir para sua conveniência (estas funções foram escritas pelo autor da ALA, Peter-Paul Koch).

function createCookie(name,value,daes) {
if (daes) {
var date = new Date();
date.setTime(date.getTime()+(daes*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 funções de cookies, necessitamos agregar onload e onunload event listeners a janela.

onLoad

Há um atributo especificado pelo W3C DOM Nível 2, "disabled" que é definido para falso quando uma folha de estilos se aplica a um documento. Este atributo é implementado corretamente no Mozilla, mas infelizmente não o é no MSIE.

MSIE tem um atributo HTML próprio, que também se chama "disabled" e que se aplica aos elementos link. Este atributo é inicialmente definido como falso para todos os elementos link.

Para definir o atributo "disabled" do MSIE tal como o atributo "disabled" do DOM Nível 2, podemos chamar a função setActiveStyleSheet() com o nome da folha de estilo preferida.

Para encontrar qual das folhas é a folha de estilo preferida, necessitamos outra função. Visto que esta função é bastante similar a função getActiveStyleSheet() não vou explicar como funciona, mas abaixo está seu 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;
 }

na função onload, primero definimos uma variável title. Esta variável guardará o valor da folha de estilos prévia que está armazenada no cookie, ou se não há nenhuma, guardará o título da nossa folha de estilos preferida. Para tornar as coisas lógicas, vamos chamar o cookie "style".

O passo seguinte será chamar a função setActiveStyleSheet() pasando-lhe a variável title para o seu title. Nossa função onload será algo parecido como abaixo:

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

Notar que é conveniente chamar esta função antes do evento onload, fazendo com que o documento seja formatado com nosso estilo preferido.

Se resolver fazer assim, assegura-te de que a dita funçao é chamada depois de ser definida as outras funções e que os elementos link estejam todos definidos.

onUnload

Armazenar o cookie no evento onunload é simples. Tudo o que temos que fazer é usar a função getActiveStyleSheet() para que nos devolva la folha de estilos ativa, e armazene-a em um cookie. Usando a função para armazenar um cookie teríamos finalmente algo como abaixo:

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

Juntando tudo

Para usar estas funções e tornar o site web mais excitante, necesitamos incluí-las no documento. Para tornar mais fácil esta tarefa, colocamos as funções num arquivo de javascript, preparado para que você faça o download e as inclua no seu site.

Download styleswitcher.js

Para incluir o arquivo javascript, necessitas colocar um script dentro da tag <head> do seu documento, asegurando-te de que está colocado depois de todos os elementos link pertencentes a folhas de estilo que tenhas. O código HTML terá este aspecto:

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

Para permitir ao visitante trocar a folha de estilos ativa, poderias usar os eventos onClick do javascript. Por exemplo: para ter a opção de escolher entre dois temas com títulos "default" e "paul" poderias usar o HTML abaixo:

<a href="#" onclick="setActiveStyleSheet('default'); return false; ">change style to default</a>
<a href="#" onclick="setActiveStyleSheet('paul'); return false;">change style to paul</a>

Uma vez que o visitante selecionou um tema, este será armazenado em um cookie. Para usar o mesmo tema em todo o sitio web, os mesmos elementos link javascript e style sheet deverão ser incluidos na tag <head> de cada página do site.

Isso é tudo pessoal!

Aí o tens, um site web personalizável que utiliza elementos link para enlaçar folhas de estilo conforme recomendações do W3C. Bom proveito!

Paul Sowden nasceu no ano de 1983 em Londres, Inglaterra e acredita que a web seria um lugar melhor se todos usassemos técnicas de projeto que atendessem as Web Standards.

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

Fazendo funcionar as folhas de estilos alternativas::