Folha de estilo (desenvolvimento web)
| Folhas de estilo em cascata |
|---|
| Conceitos |
| Filosofias |
| Ferramentas |
| Comparações |
Uma folha de estilo da web é uma forma de separação de apresentação e conteúdo para web design em que a marcação (ou seja, HTML ou XHTML ) de uma página da web contém o conteúdo e a estrutura semântica da página, mas não define seu layout visual (estilo). Em vez disso, o estilo é definido em um arquivo de folha de estilo externo usando uma linguagem de folha de estilo como CSS ou XSLT . Essa abordagem de design é identificada como uma "separação" porque substitui em grande parte a metodologia antecedente na qual a marcação de uma página definia o estilo e a estrutura.
A filosofia subjacente a esta metodologia é um caso específico de separação de interesses .
Benefícios
A separação de estilo e conteúdo tem vantagens, [1] [2] mas só se tornou prática após melhorias nas implementações CSS dos navegadores populares.
Velocidade
No geral, a experiência dos usuários em um site que utiliza folhas de estilo geralmente é mais rápida do que em sites que não usam a tecnologia. 'Geral', pois a primeira página provavelmente carregará mais lentamente - porque a folha de estilo E o conteúdo precisarão ser transferidos. As páginas subsequentes serão carregadas mais rapidamente porque nenhuma informação de estilo precisará ser baixada – o arquivo CSS já estará no cache do navegador.
Manutenibilidade
Manter todos os estilos de apresentação em um arquivo pode reduzir o tempo de manutenção e reduzir a chance de erro, melhorando assim a consistência da apresentação. Por exemplo, a cor da fonte associada a um tipo de elemento de texto pode ser especificada - e, portanto, facilmente modificada - em todo um site simplesmente alterando uma pequena sequência de caracteres em um único arquivo. A abordagem alternativa, usando estilos incorporados em cada página individual, exigiria uma edição complicada, demorada e propensa a erros de cada arquivo.
Acessibilidade
Sites que usam CSS com XHTML ou HTML são mais fáceis de ajustar para que pareçam semelhantes em diferentes navegadores (Chrome, Internet Explorer , Mozilla Firefox , Opera , Safari , etc.).
Sites que usam CSS " degradam normalmente " em navegadores incapazes de exibir conteúdo gráfico, como Lynx , ou aqueles tão antigos que não podem usar CSS. Os navegadores ignoram CSS que não entendem, como instruções CSS 3. Isso permite que uma ampla variedade de agentes de usuário possam acessar o conteúdo de um site, mesmo que não possam renderizar a folha de estilo ou não tenham sido projetados com recursos gráficos em mente. Por exemplo, um navegador que usa uma exibição em braille atualizável para saída pode desconsiderar totalmente as informações de layout e o usuário ainda teria acesso a todo o conteúdo da página.
Personalização
Se as informações de layout de uma página forem armazenadas externamente, um usuário pode decidir desabilitar totalmente as informações de layout, deixando o conteúdo do site ainda em um formato legível. Os autores do site também podem oferecer várias folhas de estilo, que podem ser usadas para alterar completamente a aparência do site sem alterar nenhum de seu conteúdo.
A maioria dos navegadores modernos também permite que o usuário defina sua própria folha de estilo, que pode incluir regras que substituem as regras de layout do autor. Isso permite que os usuários, por exemplo, coloquem em negrito todos os hiperlinks em todas as páginas que visitam.
Consistência
Como o arquivo semântico contém apenas os significados que um autor pretende transmitir, o estilo dos vários elementos do conteúdo do documento é muito consistente. Por exemplo, títulos, texto enfatizado, listas e expressões matemáticas recebem propriedades de estilo aplicadas de forma consistente da folha de estilo externa. Os autores não precisam se preocupar com as propriedades do estilo no momento da composição. Esses detalhes de apresentação podem ser adiados até o momento da apresentação.
Portabilidade
O adiamento dos detalhes da apresentação até o momento da apresentação significa que um documento pode ser facilmente reaproveitado para um meio de apresentação totalmente diferente com apenas a aplicação de uma nova folha de estilo já preparada para o novo meio e consistente com o vocabulário elementar ou estrutural do documento semântico. Um documento cuidadosamente criado para uma página da Web pode ser facilmente impresso em um volume encadernado completo com cabeçalhos e rodapés, números de página e um índice gerado simplesmente pela aplicação de uma nova folha de estilo.
Desvantagens práticas hoje
Atualmente as especificações (por exemplo, XHTML, XSL, CSS) e ferramentas de software que implementam essas especificações estão apenas atingindo os estágios iniciais de maturidade. Portanto, existem alguns problemas práticos enfrentados pelos autores que buscam adotar esse método de separação de conteúdo e estilo.
Adoção restrita sem as ferramentas de análise e geração
Embora as especificações de estilo estejam bastante maduras e ainda em maturação, as ferramentas de software demoraram a se adaptar. A maioria das principais ferramentas de desenvolvimento web ainda adota um modelo misto de apresentação e conteúdo. Assim, autores e designers que procuram ferramentas baseadas em GUI para seus trabalhos têm dificuldade em seguir o método da web semântica. Além das ferramentas GUI, repositórios compartilhados para folhas de estilo generalizadas provavelmente ajudariam na adoção desses métodos.
Veja também
Referências
Links externos
- CSS Zen Garden : Um site que desafia os designers a criar novos layouts de página sem tocar na fonte XHTML. Inclui dezenas de layouts. A fonte CSS pode ser visualizada para cada layout.
