O que são prefixos de fornecedor?

Estes são prefixos não padrão que os desenvolvedores de navegadores usam para adicionar suporte a novas ou experimentais propriedades CSS antes de sua aprovação oficial e inclusão nos padrões. Permitem introduzir gradualmente novas funcionalidades na web, mas requerem uma abordagem cuidadosa.

Principais prefixos:

• -webkit-: Chrome, Safari, Opera (algumas versões), a maioria dos navegadores móveis (incluindo Android e iOS).
• -moz-: Firefox.
• -ms-: Internet Explorer, Edge (algumas versões).
• -o-: Opera (versões antigas).

Ao usar prefixos de fornecedor, é importante considerar a ordem de escrita: primeiro os prefixos, depois a propriedade padrão. Isso garante que, quando os navegadores começarem a suportar a propriedade padrão, ela sobrescreverá o prefixo.

.element {
  -webkit-border-radius: 10px; /* Safari versões 5 e anteriores */
  -moz-border-radius: 10px; /* Firefox versões 4 e anteriores */
  border-radius: 10px; /* Propriedade padrão */
}

Atualmente, o uso de prefixos de fornecedor diminuiu significativamente graças a uma adoção mais ativa de novas propriedades CSS por todos os navegadores. No entanto, podem ser necessários para suportar versões antigas de navegadores ou ao trabalhar com APIs experimentais.

Para automatizar a gestão de prefixos de fornecedor, muitas vezes usa-se PostCSS com o plugin Autoprefixer.

// Exemplo de configuração do PostCSS com Autoprefixer
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versões', '> 1%'] // Configuração de navegadores suportados
    })
  ]
};

O Autoprefixer analisa o CSS e adiciona os prefixos necessários com base nas configurações de compatibilidade com os navegadores. Isto simplifica o desenvolvimento e reduz a probabilidade de erros relacionados com a adição e gestão manual de prefixos.