Tableless - Desenvolvimento inteligente com Padrões Web

14/04/2006
Artigos

CSS alternativo

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: 1<link rel="stylesheet" type="text/css" href="css1.css"   /> …

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:

1
<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:

1
2
<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.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://chackalsjc.wordpress.com felipe tonello

    muito legal essa dica.. eu não sabia não…

    o menu do layout novo está bugado no linux.. ele fica em cima do logo da visie..
    mas está mt bom ele!! parabéns!!

  • Breno C.

    Nem eu sabia… bem legal mesmo :)

  • Thiago

    Felipe, no meu linux o menu esta normal, tente instalar as fontes para windows, talvez seja isso.

    Legal essa dica, vou fazer uns testes aqui.

  • Santiago Carmo

    Muito legal mesmo!

    Eu não sabia que isso era possivel. Mas vivendo e aprendendo.
    Gostei muito, cada vez mais posso ver o poder do css.

    Eu gosto muito do site da visie das duas verções. Acho que é um site muito bonito limpo e de fácil navegação.

    Parabéns ótima matéria!

    Abraços!

  • http://Konqueror3.4.2 ScreenBlack

    Diego,

    Informação adicional ao seu texto, para fazer essa mudança no Konqueror basta ir em “View > Use Stylesheet > (O tipo que você quer)”.
    Mas gostei bastante dessa dica. Parab éns. :)

    Abs
    ScreenBlack

  • http://carlos.dasilva.eti.br Carlos Antonio da Silva

    Muito boa essa dica Diego..
    já conhecia a questão do css alternativo e do stile switcher, mas essa do Firefox e do Opera é novidade pra mim :)

    venho acompanhando o tableless a pouco tempo, juntamente com sites como o do Maujor, estou iniciando meus estudos sobre Web Standards e também pretendo iniciar os cursos on-line da Visie.
    Acabei de criar um blog sobre o assunto para estudos e discussão com a comunidade. Agradeço a quem quiser colaborar..

    Parabéns pelo belo trabalho!!

  • http://f-ranieri.com.br Felipe Ranieri

    Muito bom! Fiz o teste na home da Visie, bastante interessante. Aproveito para dizer que gostei mais do layout novo, achei mais clean.

    Abraços Diego.

  • http://www.promissao.net tsbega

    É bem legal esta dica mesmo , ja conhecia estas opções, e se não me engano antigamente no firefox tinha vinha um ícone na barra de status pra isso não vinha ?

    Relacionado a folhas de estilos , gostaria de ver aqui no tableless um bom tutorial, como todos os demais sobre folha de estilos de impressão.

    Não sei se ja teve algum aqui, se sim sorry, e me indiquem a url.

  • Marcelo Ariatti

    Salve!

    Muito interessante mesmo!

    :)

  • Pingback: fechaTAG » Trocando de CSS como quem troca de roupa