Propriedades CSS específicas do fornecedor: um mal necessário?

desenvolvedores de navegador (fornecedores) geralmente estendem as especificações do CSS com propriedades proprietárias. Essas extensões servem a vários propósitos, incluindo a adição de novos recursos, a realização de experimentos e facilitando o teste de recursos previstos para padronização W3C antes de atingirem o status de recomendação do candidato.

Para evitar conflitos com propriedades CSS padrão existentes ou futuras, é usada uma convenção de nomeação específica. Propriedades e palavras-chave específicas do fornecedor devem começar com um hífen (-) ou um sublinhado ( _ ). O formato recomendado é:

'-'   vendor specific identifier   '-'   meaningful name

'_'   vendor specific identifier   '-'   meaningful name

Esta convenção garante a compatibilidade, pois as propriedades CSS padrão nunca começarão com um hífen ou sublinhado. No entanto, embora isso minimize conflitos, as extensões específicas do fornecedor não fazem parte das especificações oficiais do CSS e estão sujeitas a alterações. Portanto, o uso deles deve ser minimizado.

Tabela 1: Prefixos de fornecedores comuns

Cuidado: Embora improvável que causasse conflitos, as extensões específicas do fornecedor podem mudar sem aviso prévio. Eles também não passam a validação do CSS. Priorize as propriedades CSS padrão sempre que possível. Se uma extensão for necessária, escolha um espelhando de perto uma propriedade padrão para facilitar uma transição suave para o padrão uma vez disponível.

Exemplo: o opacity propriedade

Antes do suporte generalizado do CSS3, os desenvolvedores usaram extensões específicas do fornecedor para opacidade . Este exemplo demonstra uma abordagem comum:

.test {
  background: red;
  /* IE filter extension */
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
  width: 100%;                /* Required for IE filter */
  -moz-opacity: 0.6;         /* Mozilla extension */
  -khtml-opacity: 0.6;        /* Konqueror extension (Safari 1.1) */
  opacity: 0.6;              /* Standard CSS3 syntax */
}

Esta técnica garantiu a compatibilidade entre vários navegadores, com cada navegador selecionando a propriedade apropriada. Mesmo depois que os navegadores adotaram o padrão opacidade , essa abordagem permaneceu funcional. Observe que a propriedade Internet Explorer é uma exceção não padrão.

Conclusão:

Propriedades específicas do fornecedor podem ser úteis para testes e pontes de lacunas de compatibilidade, mas não são ideais para soluções de longo prazo. Sempre favoreça as propriedades CSS padrão. Use prefixos de fornecedores com moderação e somente quando absolutamente necessário, lembrando que eles não estão bem documentados e podem mudar inesperadamente. Consulte Recursos como posso usar para obter informações de compatibilidade do navegador.