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: <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, [...]
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.
Reviews de Extensions
Quem trabalha com Firefox sabe como as extensões podem mudar a vida de um desenvolvedor. Nós separamos algumas extensões e sugerimos para você. Confira.
Leia maisSobre Wordpress
O desenvolvimento com wordpress vem crescendo e sua plataforma está ficando mais robusta a cada dia. Por isso preparamos alguns artigos e tutoriais sobre desenvolvimento e implemetação de Wordpress em sites.
Leia maisSobre
SEO
Hoje não é sorte. Colocar um site em uma boa colocação no Google não é fácil e muitas vezes pode ser uma dor de cabeça sem tamanho. Por isso, manter um código organizado e simples é um bom começo. Separamos algumas dicas para que você consiga otimizar seu código e fazer algumas modificações nos seus sites para que eles não fiquem atrasados.
Leia maisTutoriais na Prática
Nós falamos muito sobre XHTML e CSS. Então, nada mais justo que ter um lugar onde você consiga aprender melhor as técnicas e metodologias de desenvolvimento com CSS e XHTML.
Leia mais
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!!
Nem eu sabia… bem legal mesmo
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.
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!
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
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!!
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.
É 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.
Salve!
Muito interessante mesmo!
[...] Tenho dito por aí nas palestras que você só vai sentir realmente as vantagens de se trabalhar com layout tableless no dia que tiver que fazer manutenção num site que já está no ar. O ganho é absurdo, difícil de estimar. O Diego fez uma alteração de layout no site da Visie um dia desses, para mostrar como é fácil. [...]