Tableless

Busca Menu

CSS alternativo

Seja o primeiro a comentar por

Para oferecer um CSS alternativo para sua página é muito fácil, e você nem precisa de fazer um style switcher para funcionar.

Para importar um CSS na página, geralmente usamos a tag link assim:

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

Até aqui nada de sensacional. Agora vem o segredo (nem tão segredo assim): para servir outro CSS, você vai simplesmente duplicar esta linha com uma pequena diferença: no atributo “rel” você mudará o valor para “alternate stylesheet”, isto indicará que aquele CSS importado será alternativo, secundário. Ficará assim:

<link rel="stylesheet" type="text/css" href="css1.css" />
<link rel="alternate stylesheet" type="text/css" href="css2.css" />

Muito fácil né? Mas como alternamos estes estilos?
Normalmente você faria um Style Switcher simples, que faz guardar no cache a opção do camarada e tudo mais.
Mas, se você não ligar muito para isso, os browsers bons como Firefox e Opera detectam automaticamente seus estilos alternativos e mostram as opções para escolha.

No Firefox, você faz assim: Exibir > Estilos da Página > Escolha o estilo desejado
No Opera: View > Style > Escolher estilo

Para fazer um teste, lembram daquele video tutorial que fiz sobre a implementação do CSS do layout da Visie?
Bom, esses dias mudamos o layout do site, eu reaproveitei a estrutura XHTML e refiz apenas o CSS. Ótima experiência… Pena que só lembrei de fazer um Video Tutorial depois que eu terminei, aí já era tarde. 🙁

Coloquei o CSS antigo como alternativo. Visite a página e tente alternar os estilos da página com os navegadores.

Fácil não é?
Mas é bem mais legal quando você faz um script decente, que guarda a opção no cache e tudo mais. Fica mais interativo.

Publicado no dia