CSS3: Cantos arredondados, sombras e degradês até no IE

Enquanto o movimento em prol do HTML5 ganha cada vez mais força, o que podemos falar do CSS3?

Para a nossa felicidade, Opera, Safari, Google Chrome, Firefox e (o polêmico) IE9 já apresentam (ou apresentarão, no caso do IE) bom suporte às principais propriedades do CSS3. Mas vale ressaltar que, assim como o HTML5 o CSS3 é apenas um “draft“… os navegadores suportam algumas características através de expressões proprietárias (então a cautela neste caso também é necessária).

Isto pode (e deve) ser encarado de uma forma muito negativa. Mas temos que entender que estas expressões proprietárias estão calcadas em especificações do W3C, ou seja, é bem provável que o border-radius do Firefox (realizado através da expressão -moz-border-radius) irá reproduzir um efeito similar ao border-radius do Chrome (que já segue a especificação do W3C). A dica que eu dou é a seguinte: Utilize Graceful Degradation, ou seja, escreva seus estilos com CSS3, e vá adicionando exceções para suportar os demais navegadores que não suportam certas propriedades.

Vamos ao que interessa?!

CSS3 Please!

O site CSS3 Please! The Cross-Browser CSS3 Rule Generator nos ensina como fazer border-radius, box-shadow, transform, transition, text-shadow e font-face; de forma muito simples e prática, e que funcione no Safari, Chrome, Opera e Firefox (e algumas propriedades até no IE).

É uma referência muito interessante que deve estar sempre disponível para quando bater aquela dúvida. Podemos reparar que são (na maioria dos casos) expressões proprietárias, mas que atingem a experiência obtida utilizando uma expressão standard (como no caso do border-radius).

CSS3 PIE

O CSS3 Please! já quebra um bom galho na utilização de alguns recursos do CSS3. Mas no caso do IE, algumas propriedades como border-radius e box-shadow (que no meu caso são as propriedades mais “salva-vidas” da linguagem) não possuem alternativas.

O site CSS3 PIE apresenta uma forma de utilizar estas propriedades sem precisar utilizar PNGs com transparência. Através de um arquivo .htc importado na folha de estilo, podemos fazer com que o IE (do 6 ao 8 ) possa compreender as seguintes propriedades:

• border-radius
• box-shadow
• border-image
• Múltiplas imagens de fundo (background images)
• Gradiente como fundo (linear-gradient as background image)

Já é uma boa economia de trabalho, não?

jQuery e Graceful Degradation

Recentemente o Tableless fez um excelente post sobre como usar a jQuery como meio de fazer alguns navegadores lidarem da melhor forma possível com novos recursos do CSS3 e HTML5. Sempre fui muito a favor da visão deles e dessa vez não será diferente.

Nivelar por baixo pode ser uma excelente forma de garantir acessibilidade. Mas não é pecado “vendermos” um pouco de “boa experiência” para nossos usuários.

Enriquecer a experiência do usuário não é crime… esquecer da acessibilidade sim.