30

Em muitos códigos são adicionados os prefixos de compatibilidade dos navegadores em atributos do CSS. Exemplo:

.exemplo {
  -webkit-background-size: 50% 50%;
  -moz-background-size: 50% 50%;
  -o-background-size: 50% 50%;
  background-size: 50% 50%;
}

Mas se deixar somente o atributo, sem prefixo, funciona normalmente. Exemplo:

.exemplo-2 {
  background-size: 50% 50%;
}

Esse prefixos (-webkit-, -moz-, -o-) são importantes? Devo ainda colocá-los?

1
  • 1
    @Evando estes seletores com prefixos são considerados "experimentais", ou seja não são "standards" conforme os padrões, porém em vários motores de navegadores modernos eles já são suportados em "standard" então não é necessário o prefixo.
    – Syzoth
    Commented 1/02/2014 às 1:04

4 Respostas 4

31

Os prefixos -webkit-, -moz- etc são chamados vendor prefixes. São adotadas pelo browser com esses prefixos propriedades ainda em período experimental.

Geralmente, a justificativa para esse tipo de suporte é a implementação de uma especificação ainda não finalizada, ou a implementação de um recurso que ainda não faz parte de uma especificação formal (-webkit-, por exemplo, possui muitas propriedades específicas experimentais), simplesmente. Quando a propriedade apresenta um comportamento, enfim, estável, os prefixos tornam-se desnecessários.

Como manter-se atualizado

O Can I Use? é uma fonte essencial para verificar o estado de suporte das propriedades em diferentes versões de diferentes navegadores. Indica versões do navegador em que a propriedade é dependente de prefixos ou simplesmente não suportada de nenhuma forma.

"Prefixos são ótimos"

Ao contrário do que foi dito, o "uso do prefixo" não é, de forma alguma, uma prática boa - nem ruim. Na verdade, não faz sentido esse tipo de afirmação. Existem diferentes pontos de vista sobre vendor prefixes em discussão. Portanto, é melhor vê-lo como algo apenas necessário no momento.

Há recomendações, mas não há como definir se o uso é necesśario ou não.

Tudo depende do quão compatível deve ser seu projeto.

Dizer que text-shadow ou border-radius já não necessita de prefixos é uma recomendação coerente e eu mesma a faço, mas é somente isso. O mais importante de tudo é conscientizar-se de que, ao mesmo tempo que deve-se estar atento ao suporte das propriedades** para evitar incompatibilidades, também deve-se evitar vendor prefixes quando seu uso é desnecessário.

8

Quando o navegador está implementando uma nova propriedade do standard, ele a faz disponível com o prefixo no primeiro momento. Esse prefixo (chamado vendor prefix) é removido apenas quando o comportamento da propriedade é exatamente igual ao especificado. Em vários casos haverá diferenças entre o comportamento "oficial" e o exibido pela propriedade prefixada. Mas muitas vezes você não tem opção.

Inclua uma variação da propriedade para cada navegador apenas quando você quer usar uma característica nova do CSS que não existe na versão desprefixada nas versões que você planeja suportar. E nunca esqueça de por a versão sem prefixo embaixo de tudo para garantir que ela tera precedência onde for suportada.

Não há necessidade de por prefixos em todas as propriedades no entanto. Foi-se o tempo em que border-radius precisava deles.

2

O uso dos prefixos é necessário se você quer dar suporte ao atributo para versões dos navegadores nos quais este atributo ainda estava sendo implementado. Para entender melhor isso você pode observar a compatibilidade da propriedade background-size e outras neste link. Onde for possível ver o prefixo na célula junto a versão do navegador significa que ele é necessário para dar suporte ao atributo.

2

Alguns prefixos estão já implementados completamente como elementos do css 3, porem nem todos tem suporte ou estão completamente definidos, por isto é importante utilizar os prefixos que dependendo da versão do navegador podem não estar implementados como um atributo do css.

Para resolver este problema também é possível utilizar o Prefix free, nele você escreve apenas de uma única forma enquanto o código do prefix free se responsabiliza para manter a compatibilidade entre os demais navegadores.

Link: Prefix Free

E uma demonstração pode ser vista em:

Link: Test Drive - Prefix Free

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .