CSS3, Progressive Enhancement e Graceful Degradation

O CSS3 nos traz grandes facilidades na hora de implementar diferentes tipos de efeitos visuais de nossos layouts, que somente eram possíveis com o uso de imagens, e às vezes até mesmo algumas gambiarras, como por exemplo sombras e cantos arredondados.

Entre as vantagens de se usar CSS3, estão:

  • Velocidade: já que em muitos casos conseguimos resolver com apenas uma linha de código aquilo que necessitávamos de várias linhas, além de imagens;
  • Flexibilidade: com códigos apropriados para cada tipo de efeito podemos deixar os elementos do layout mais modulares e flexíveis ao conteúdo e aos formatos dos dispositivos onde serão exibidos;
  • Escalabilidade: com elementos mais modulares e flexíveis, conseguimos fazer com que o projeto possa ser estendido e ampliado de diferentes formas, acoplando de forma simples diferentes tipos de elementos, sem grandes esforços ou retrabalhos;
  • Leveza: a substituição de imagens por códigos proporciona projetos mais leves, além de uma renderização visual melhor do que conseguiríamos com imagens.

Mas nem tudo são flores. Hoje, como a linguagem não foi ainda lançada de forma definitiva, encontramos também uma série de problemas, tais como:

  • Experimental: muitas propriedades ainda estão em fase de testes, ou sujeitas a alterações, e nem tudo pode funcionar perfeitamente;
  • Redundância: esse caráter experimental da linguagem faz com que seja necessária a utilização de diferentes prefixos para diferentes navegadores em nosso código. Isso quer dizer que para eu aplicar um efeito como border-radius (bordas arredondadas), será necessário repetirmos essa mesma propriedade várias vezes, sempre iniciando com um prefixo como -webkit- (para navegadores como o Chrome e o Safari) ou -moz- (para o Firefox).
  • Excesso: assim como aconteceu com os sites em Flash, onde a enorme gama de possibilidades de efeitos e movimentos fez com que os sites virassem verdadeiros desfiles de carnaval sem muita função definida ou sem uma boa usabilidade, o CSS3 muitas vezes acaba indo pelo mesmo caminho. Vemos muitos desenvolvedores e designers que, ao se aventurar pela nova versão de linguagem, utilizam todos os efeitos possíveis disponíveis, mesmo que não haja necessidade ou não faça muito sentido;
  • Suporte: Mesmo que para a maioria dos navegadores consigamos aplicar as novas propriedades ao menos com o uso dos prefixos, ainda assim o navegador Internet Explorer, da Microsoft (a pedra em nosso sapato), não suporta de forma alguma essas propriedades até a sua versão 8, nem mesmo com o uso de prefixos. Por mais que a participação do Internet Explorer no mercado venha despencando gradativamente, ainda devemos considerar bem a quantidade de usuários que ainda o utilizam.

Pensando em minimizar esses problemas, podemos trabalhar utilizando a idéia de dois conceitos parecidos na hora de projetar um layout e implementá-lo com CSS3. Vejamos a seguir.

Progressive Enhancement

De uma forma simplista, podemos dizer que o Progressive Enhancement (Melhoramento Progressivo, em uma tradução livre) tem a preocupação primeira de projetar algo que tenha funcionalidades e recursos que possam ser executadas ou exibidas em todos os tipos de navegadores, mesmo aqueles mais antigos, sem restrição.

Atingindo esse mínimo denominador comum de funcionalidades usáveis e de experiência, podemos pensar em fornecer esse melhoramento progressivo para aqueles navegadores mais atuais, como inserir as novas propriedades de CSS3, cuidando do refinamento da interface.

Progressive-Enhancement

Graceful Degradation

Seguindo uma linha de raciocínio parecida, mas caminhando pelo sentido oposto. No Graceful Degradation (Degradação suave, em tradução livre) o projeto começa por tudo aquilo que é possível de se conseguir em termos de recursos visuais e funcionalidades nos navegadores mais modernos.

A ideia é fornecer a melhor experiência de uso para quem consegue usufruir dela, mas isso não quer dizer que o site não funcionará em navegadores mais antigos. Talvez o usuário que acessar o site pelo IE7 (ou IE6, se ainda existir alguém) não consiga ver as bordas arredondadas ou sombras, mas ainda assim poderá usufruir de todas as funcionalidades e serviços do site. Uma degradação visual suave, mas sem comprometer a experiência como um todo.

Graceful-Degradation

A maior diferença entre o Progressive Enhancement e o Graceful Degradation é que o primeiro tem um pensamento de baixo pra cima, e o segundo de cima pra baixo. Porém (em minha opinião), ambos tem o mesmo objetivo: não privar os usuários de navegadores mais antigos de usar e ter acesso as funcionalidades, e não privar os usuários de navegadores mais atuais de uma bela experiência.

Não importa o nome pela qual você queira chamar isso, nem se você pensa de baixo pra cima ou de cima pra baixo. O nosso foco deve ser nunca privar usuários de qualquer funcionalidade.

Rolar para cima