CSS

21 set, 2009

CSS: Alternative Style Sheets

Publicidade

Você sabia que um documento HTML não precisa necessariamente ter uma
única folha de estilos? Você pode proporcionar ao usuário várias outras
folhas de estilo em um único documento HTML, para que ele possa
escolher a que melhor se adequa a seu gosto, ou, partindo para o lado da
acessibilidade, criar folhas de estilo de alto contraste que facilite a
leitura de usuários com baixa visão.

Criar folhas de estilo alternativas não exige muito esforço e não
tem segredo algum, você só vai encontrar dificuldade devido a alguns
browsers que não suportam essa opção, mas, por exemplo, no firefox você
pode ir até Exibir > Estilos da página e trocar as folhas de estilo
dentre as disponíveis, se é que o site disponibiliza essa opção.

<link rel="stylesheet" type="text/css" href="default.css" title="Default CSS" />
<link rel="alternate stylesheet" type="text/css" href="simple.css" title="Simple CSS" />
<link rel="alternate stylesheet" type="text/css" href="dark.css" title="Dark CSS" />

A primeira folha de estilos foi a que eu defini como padrão, as
outras duas a seguir são as folhas de estilo alternativas, pois, como
podem observar, elas possuem o atributo re=”alternate stylesheet” e só
serão carregadas se o usuário alterá-las no browser. Para que vocês
entendam como isso funciona, dêem uma olhada no exemplo que criei para esse tutorial.