Explicação detalhada do aprimoramento progressivo CSS (Cascading Style Sheets)

Há muitas maneiras de incorporar aprimoramento progressivo em seu trabalho com Cascading Style Sheets (CSS). Este artigo discutirá algumas das mais bem-sucedidas e considerará outras maneiras de aprimorar gradualmente seu site.

Organização da folha de estilo

Muitos web designers e desenvolvedores não pensam muito em como introduzir folhas de estilo em documentos, mas na verdade é uma arte. Com a abordagem certa, você pode colher imediatamente os muitos benefícios do aprimoramento progressivo.

Use várias folhas de estilo

Dividir um pouco seus estilos pode trazer muitos benefícios. Obviamente, uma folha de estilo com mais de 1.500 linhas é um pouco difícil de manter, e dividi-la em várias folhas de estilo pode melhorar o fluxo de trabalho (e economizar esforço). Há outro benefício que raramente é mencionado: ajuda a obter efeitos de apresentação mais consistentes no tipo de mídia alvo (Tradução: refere-se a vários tipos de mídia, como computadores, impressoras, televisões, telefones celulares, etc.).

O arquivo main.css contém todas as regras de estilo do site. Considere dividi-lo em folhas de estilo independentes contendo tipografia, layout e cor, nomeadas respectivamente: type.css, layout.css, color.css.


(Ilustração: como dividir uma única folha de estilos em várias folhas de estilos relacionadas)

Depois que a separação acima for concluída, você poderá usar alguns truques mágicos para fornecer automaticamente uma experiência de "baixa fidelidade" para navegadores desatualizados (como IE5/Mac) e muitos navegadores que não possuem forte suporte para layout CSS. Como fazer isso? Tudo depende de como você importa o arquivo. Suponha que main.css seja introduzido por meio do elemento link:


Primeiro, divida a linha de referência acima em três folhas de estilo relacionadas:


No passado, muitos desenvolvedores definiam o valor da mídia como "tela" ou "projeção", tornando o estilo de layout completamente inválido no Netscape 4.x (Anotação: o Netscape 4.x não suporta layouts complexos, como flutuante e posicionamento). No entanto, existe uma solução melhor. Antes de explicar esse método em detalhes, vamos dar uma olhada em Tipos de mídia alternativos.

Tipos de mídia opcionais

O aprimoramento progressivo concentra-se principalmente no conteúdo e queremos trazer uma experiência “aprimorada” para todos os dispositivos que suportam a exibição de conteúdo. Portanto, é importante considerar dispositivos além do navegador, como dispositivos impressos e móveis.

Infelizmente, o mercado de dispositivos móveis ainda é fragmentado e imaturo (não seja ingênuo ao pensar que todos os navegadores portáteis renderizarão estilos de tipo de mídia direcionados à “tela”). Como resultado, uma discussão detalhada sobre a melhoria progressiva em todos os meios de comunicação ocuparia muitas páginas, se não um livro. Mas não se desespere: no mundo móvel, as diferenças estão começando a se unificar e algumas pessoas muito inteligentes estão começando a reunir recursos para nos ajudar no desenvolvimento. No entanto, para economizar tempo e esforço, focaremos nos dispositivos de impressão.

Normalmente, precisamos usar outro elemento de link para adicionar estilos de impressão:


Por convenção, a folha de estilo acima contém todas as regras relacionadas à impressão, incluindo regras de layout e cores. Especialmente para layout, a maioria das regras na folha de estilo provavelmente será copiada de main.css. Em outras palavras, isso resulta em muito código duplicado.

Você pode ver o benefício de separar estilos de publicação e cores de estilos de layout: não precisamos mais dessas regras repetidas na folha de estilos de impressão. Além disso, outra dica organizacional pode ser utilizada para melhorar a usabilidade do site, bem como para ocultar determinados estilos de layout de navegadores problemáticos.

Olhando novamente para nossa folha de estilo, considere o seguinte código:


Não declaramos um tipo de mídia, portanto o Netscape 4.x lerá todos os estilos nesses três arquivos. Entretanto, o navegador Netscape entende CSS básico e podemos tirar vantagem disso. Podemos organizar ainda mais nossos estilos movendo todos os estilos contidos em layout.css para uma nova folha de estilos - apropriadamente chamada screen.css. Por fim, atualize o conteúdo em layout.css para importar screen.css, para que o NS4.x e seus navegadores irmãos não sejam mais inteligentes (porque não entendem a diretiva @import). (Nota de tradução: o que o autor está falando aqui é mover todo o conteúdo de layout.css para screen.css e, em seguida, introduzir screen.css por meio de @import em layout.css. Acho que a melhor maneira é adicioná-lo a layout.css Mantenha os estilos de layout mais básicos que também podem ser compreendidos pelo NS4.x e mova outros estilos de layout avançados para screen.css).


Há espaço para melhorias - a mídia que a folha de estilo tem como alvo deve ser declarada, o que fazemos adicionando o tipo de mídia à declaração @import:


O problema é que os navegadores IE7 e anteriores não entendem essa sintaxe e, portanto, ignoram a folha de estilos acima. Se você deseja fornecer a folha de estilos acima para esses navegadores (o que geralmente é desejado), você pode fazê-lo facilmente usando comentários condicionais, que. será elaborado abaixo. Se você tem um olho aguçado como uma águia, deve ter notado que aspas simples (') são usadas em vez de aspas duplas (") em ambos os lados do nome da folha de estilo. Este pequeno truque permite que o IE5/Mac ignore o estilo Os recursos de layout CSS do IE5/Mac são muito fracos (especialmente suporte para flutuação e posicionamento) e é perfeitamente aceitável ocultar regras de layout deles. Afinal, eles ainda podem obter informações de cor e layout, o que é suficiente em alguns casos. .

Usando a mesma técnica, você pode importar o arquivo print.css (que, como você pode imaginar, contém regras específicas para layout de impressão).


Agora não temos apenas uma folha de estilo lindamente organizada, mas também um método eficaz para aprimorar gradativamente o design do seu site.


(Ilustração de como múltiplas folhas de estilo se relacionam entre si e como aplicá-las a um documento)

Como lidar com o IE6?

Para muitas pessoas, o Internet Explorer 6 é o novo Netscape 4 – e todo mundo quer que ele desapareça.

Vamos pular a insistência nos problemas do IE6. Os problemas com o IE6 estão bem documentados e, honestamente, não são tão difíceis de resolver. Além disso, a adoção do IE7 é bastante rápida (especialmente no mercado consumidor), e o IE8 já está em beta público. Isso significa que um dia poderemos realmente dizer adeus ao envelhecimento do IE6.

Intencionalmente ou não, quando a Microsoft lançou o IE5, ele forneceu uma boa ferramenta para aprimoramento progressivo: comentários condicionais. Esses trechos inteligentes de lógica (relegados aos comentários HTML em todos os outros navegadores) não apenas permitem que certos trechos de código de marcação funcionem apenas para o IE, mas também permitem que esses trechos de código funcionem apenas em versões específicas do IE.

Como desenvolvedores conscientes dos padrões da Web, devemos sempre primeiro testar nossos projetos na maioria dos navegadores compatíveis com os padrões existentes e, em seguida, fornecer patches para os navegadores que podem voltar ao normal com pequenas alterações. O fluxo de trabalho de cada pessoa é diferente, mas acho melhor iniciar cada projeto com um conjunto padrão de documentos. Meu pacote básico inclui os seguintes arquivos:


Em seguida, dependendo das necessidades do projeto, adicione arquivos CSS específicos do navegador para incluir essas “pequenas modificações”. Na maioria dos projetos atuais, esses arquivos são ie7.css e ie6.css. Se o projeto exigir suporte para versões anteriores ao IE6, também criarei arquivos correspondentes para ele (como ie5.5.css, etc.). Com esses arquivos instalados, comecei a adicionar regras de estilo às folhas de estilo apropriadas.

Começo meus testes de CSS no Mozilla Firefox porque a maior parte do meu CSS é escrita usando a barra lateral do editor CSS do Firefox. Assim que terminei de projetar a página no Firefox, abri imediatamente outro navegador para testá-la e visualizá-la. A maioria tem um desempenho perfeito porque segue os padrões da web. Em seguida, abra o IE7 para testar. Na maioria dos casos, não há muitos problemas. Ocasionalmente, o hasLayout precisa ser acionado ou outros pequenos erros de layout precisam ser corrigidos. Em vez de escrever essas correções no arquivo de folha de estilo do conjunto base, adicionei-as ao ie7.css e as introduzi por meio de comentários condicionais no HEAD do documento:


Os comentários condicionais acima permitem que o IE7 e versões anteriores (Nota de tradução: lte é a abreviatura de menor ou igual) reconheçam o estilo introduzido. Portanto, ao navegar na página com o IE7, esses patches serão obtidos. Mas se você estiver usando uma nova versão do IE - que pode ter corrigido esses problemas, por exemplo o IE8 abandonou o hasLayout e não apresenta mais esses problemas - esses estilos serão ignorados. Por outro lado, esses estilos podem ser obtidos usando o IE6. Isso é bom porque bugs de renderização no IE7 tendem a estar presentes no IE6 também. Como mencionado acima, as versões do IE7 e anteriores não conseguem entender @import com o tipo de mídia. Introduzir screen.css dessa forma é inválido para o IE7 e versões anteriores. Portanto, você também precisa adicionar uma instrução @import sem tipo de mídia na parte superior do arquivo ie7.css para apresentar screen.css.

Depois de corrigir o IE7, abrirei o IE6 e verei se preciso corrigir alguma coisa. Se necessário, eu adicionaria outro comentário condicional ao documento, importando-o para o ie6.css:


Em seguida, basta adicionar os patches exigidos pelo IE6 às folhas de estilo correspondentes. Essas folhas de estilo serão ignoradas pelo IE7, mas ainda afetarão versões como o IE5.5.

Usando comentários condicionais dessa forma, você pode gerenciar facilmente os navegadores de destino em seu projeto e manter os arquivos de patch CSS independentes e gratuitos.

Outras considerações

O aprimoramento progressivo de CSS não se limita a como associar folhas de estilo a documentos, mas também pode ser aplicado a como escrever CSS.

Por exemplo, considere o conteúdo gerado. Não é compatível com todos os navegadores, mas é uma ótima maneira de adicionar algum design ou texto extra. Isso não é necessário para a usabilidade da página, mas pode fornecer algumas melhorias visuais ou outras.

Veja um formulário de contato simples como exemplo:


(Ilustração: formulário HTML usado neste exemplo (o código será fornecido abaixo))

Ao escrever o código HTML acima, é provável que os dois pontos (:) sejam escritos naturalmente no elemento rótulo. Por que fazer isso? O conteúdo é realmente adicionado ao elemento rótulo? Na verdade. O objetivo disso é fornecer pistas visuais adicionais ao usuário. Para o elemento rótulo, ele é redundante e deve ser removido:


Uma maneira mais perfeitamente adequada é adicionar dois pontos de volta ao documento, gerando conteúdo:


Escrever formulários desta forma nos dá flexibilidade: quando precisamos remover caracteres decorativos de todo o site, podemos simplesmente editar o arquivo CSS sem ter que encontrar cada formulário (embora já soubéssemos onde). Esse truque também se degrada bem, porque sem os dois pontos o formulário não fica inutilizável - um ótimo exemplo de aprimoramento progressivo.

Talvez você tenha descoberto que usando seletores CSS avançados (tradução: seletor, também traduzido como seletor, mas acho que os seletores podem refletir melhor o significado original, como operador é traduzido como operador em vez de operador), você pode alterar um estilo específico anexado a navegadores mais avançados, isso ajuda a aprimorar o site ao longo do tempo. Um bom exemplo é o seletor de atributos, que não é compreendido (e, portanto, ignorado) no IE6, em seus contemporâneos e em navegadores anteriores. Egor Kloos usou esse conceito lindamente com seu envio intitulado “Gemination” no CSS Zen Garden:


(Ilustração: comparação da renderização do trabalho CSS Zen Garden de Egor Kloos ("Double Double") em navegadores padrão e IE6)

Como ele fez isso? Aqui está o código de exemplo ligeiramente modificado:


A diferença é óbvia e é uma bela ilustração de como o aprimoramento progressivo pode ser usado em CSS.

Da mesma forma, o site de Andy Clarke tem algumas informações sobre o IE6. Usando os filtros do IE e adicionando algumas anotações condicionais, Andy conseguiu remover todas as cores do site e fornecer algumas imagens substituíveis que proporcionam uma experiência verdadeiramente “lo-fi”.


(Ilustração: comparação do site de Andy Clark em navegadores padrão e IE6)

A técnica cinza na imagem acima é esta: Na folha de estilo do IE6 (e abaixo) adicionada pelo comentário condicional, adicione a seguinte instrução:


Embora os dois exemplos acima possam conter muitas técnicas que não são usadas no trabalho diário, eles ilustram perfeitamente o conceito de como aplicar o aprimoramento progressivo de CSS na prática.

Resumir

Conforme discutimos, existem várias maneiras de aplicar o aprimoramento progressivo de CSS ao seu site. A maneira mais simples, e provavelmente a melhor, é organizar suas folhas de estilo e pensar cuidadosamente sobre como você irá vinculá-las ao seu documento. Depois de entender os comentários condicionais, lidar com problemas específicos do IE será muito fácil. Se você tiver uma compreensão clara de como usar seletores e dos cenários em que eles são usados, poderá fazer ajustes mais refinados em CSS.

Armado com esse conhecimento, você estará no caminho certo para se tornar um especialista em aprimoramento progressivo.