Se você está trabalhando com CSS3 ou já pegou alguns estilos com propriedades CSS3 por aí, já viu o uso de prefixos, que atencedem o atributo que será tratado – veja aqui um exemplo.
Ao trabalhar com o efeito de sombra em um box, por exemplo, eu adicionaria as linhas de código abaixo:
[sourcecode language=”javascript”] .container {-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-o-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
} [/sourcecode]
A necessidade de ser adicionar prefixos antes das propriedade vem do fato que o CSS3 vem sendo adicionado gradativamente nos navegadores. Um efeito x não funcionará da mesma maneira dos navegadores y e z, e pode ser que alguns deles você não suportem certas propriedades.
Adicionar um prefixo antes de uma propriedade funciona como “trabalhar em uma obra em andamento”, ou seja, enquanto um efeito não está oficialmente inserido na biblioteca, cada navegador poderá ter uma forma um pouco particular de interpretá-lo.
Cada navegador tem um prefixo próprio e propriedades experimentais que poderão não funcionar em outros browsers. Os navegadores ignoram as linhas com prefixos que não reconhecem.
Os principais browsers e prefixos utilizado estão retratados na tabela abaixo:
A primeira vista pode parecer trabalhoso trabalhar com prefixos, mas além de ser uma parte importante no processo de padronização do CSS3, você poderá evitar retrabalho em projetos posteriormente. Além disso, ao trabalhar com um efeito de borda arredondada, por exemplo, sem utilizar o CSS3, você teria muito mais trabalho, linhas de código e imagens.
