CSS3 e o uso de prefixos

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:

.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);
}

A necessidade de se 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 nos navegadores y e z, e pode ser que alguns deles 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 usar 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.

Postado originalmente em Eu Faço Programas