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.
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.
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.
