CSS3 e o uso de prefixos

AGRADEÇA AO AUTOR COMPARTILHE!

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

AGRADEÇA AO AUTOR COMPARTILHE!

Gabii Fonseca

Mais artigos deste autor »

Gabriella Fonseca Ribeiro tem 21 anos e cursa Sistemas de Informação. Trabalha com desenvolvimento, pesquisa e otimização de websites - SEO, marketing digital, redes sociais e comunicação interativa. || www.eufacoprogramas.com


Deixe seu comentário

Seu endereço de e-mail não será publicado. Campos com * são obrigatórios!

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">