O que são fornecedores CSS ou prefixos de navegador?

Prefixos de fornecedores de CSS, também conhecidos como ou CSS prefixos de navegador, são uma forma para os fabricantes de navegadores adicionarem suporte para novos recursos CSS antes que esses recursos sejam totalmente suportados em todos os navegadores. Isso pode ser feito durante uma espécie de período de teste e experimentação em que o fabricante do navegador determina exatamente como esses novos recursos CSS serão implementados. Esses prefixos se tornaram muito populares com o surgimento de CSS3 alguns anos atrás.

Origens dos Prefixos do Fornecedor

Quando o CCS3 foi introduzido pela primeira vez, várias propriedades animadas começaram a chegar a navegadores diferentes em momentos diferentes. Por exemplo, os navegadores com tecnologia Webkit (Safari e Chrome) foram os primeiros a introduzir algumas das propriedades de estilo de animação, como transformar e transição. Usando o prefixo do fornecedor propriedades, os web designers puderam usar esses novos recursos em seu trabalho e exibi-los nos navegadores que os apoiou imediatamente, em vez de ter que esperar que todos os outros fabricantes de navegadores detectassem pra cima!

Prefixos Comuns

Portanto, da perspectiva de um desenvolvedor front-end da web, os prefixos do navegador são usados ​​para adicionar novos recursos CSS em um site enquanto você se sente confortável sabendo que os navegadores suportarão esses estilos. Isso pode ser especialmente útil quando diferentes fabricantes de navegadores implementam propriedades de maneiras ligeiramente diferentes ou com uma sintaxe diferente.

Os prefixos de navegador CSS que você pode usar (cada um específico para um navegador diferente) são:

• Android:

  -webkit-

• Cromada:

  -webkit-

• Raposa de fogo:

  -moz-

• Internet Explorer:

  -em-

• iOS:

  -webkit-

• Ópera:

  -o-

• Safári:

  -webkit-

Adicionando um Prefixo

Na maioria dos casos, para usar uma propriedade de estilo CSS totalmente nova, você pega a propriedade CSS padrão e adiciona o prefixo para cada navegador. As versões prefixadas sempre virão primeiro (em qualquer ordem que você preferir), enquanto a propriedade CSS normal virá por último. Por exemplo, se você deseja adicionar uma transição CSS3 ao seu documento, você deve usar a propriedade de transição conforme mostrado abaixo:

-webkit-transição: todos os 4s fáceis;
-moz-transição: todos os 4s fáceis;
-ms-transição: todos os 4s são fáceis;
-o-transição: todos os 4s são fáceis;
transição: toda a facilidade dos 4s; 

Lembre-se de que alguns navegadores têm uma sintaxe diferente para certas propriedades do que outros, portanto, não presuma que a versão prefixada do navegador de uma propriedade é exatamente a mesma que a propriedade padrão. Por exemplo, para criar um gradiente CSS, você usa a propriedade gradiente linear. Firefox, Opera e versões modernas do Chrome e Safari usam essa propriedade com o prefixo apropriado, enquanto as versões anteriores do Chrome e Safari usam a propriedade prefixada -webkit-gradient.

Além disso, o Firefox usa valores diferentes dos padrões.

O motivo pelo qual você sempre termina sua declaração com a versão normal e não prefixada da propriedade CSS é para que, quando um navegador oferecer suporte à regra, ele a usará. Lembre-se de como o CSS é lido. As últimas regras têm precedência sobre as anteriores se a especificidade for a mesma, então um navegador leria a versão do fornecedor de um regra e use isso se não for compatível com o normal, mas assim que o fizer, substituirá a versão do fornecedor pelo CSS real regra.

Prefixos de fornecedores não são um hack

Quando os prefixos do fornecedor foram introduzidos pela primeira vez, muitos profissionais da web se perguntaram se eles eram um hack ou um voltar aos dias sombrios da bifurcação do código de um site para oferecer suporte a diferentes navegadores (lembre-se de que "Este site é melhor visualizado no IE" mensagem). Prefixos de fornecedores de CSS não são hacks, entretanto, e você não deve ter reservas sobre como usá-los em seu trabalho.

Um hack CSS explora falhas na implementação de outro elemento ou propriedade para fazer com que outra propriedade funcione corretamente. Por exemplo, o hack do modelo de caixa explorou falhas na análise da família de voz ou em como os navegadores analisam barras invertidas \. Mas esses hacks foram usados ​​para corrigir o problema da diferença entre como o Internet Explorer 5.5 lidava com o modelo de caixa e como Netscape interpretou, e não tem nada a ver com o estilo da família de voz. Felizmente, esses dois navegadores desatualizados são aqueles com os quais não temos que nos preocupar atualmente.

Um prefixo de fornecedor não é um hack, pois permite que a especificação defina regras de como uma propriedade pode ser implementada, enquanto, ao mesmo tempo, permite que os fabricantes de navegadores implementem uma propriedade de uma maneira diferente sem quebrar tudo senão. Além disso, esses prefixos estão trabalhando com propriedades CSS que eventualmente fará parte da especificação. Estamos simplesmente adicionando algum código para obter acesso à propriedade antecipadamente. Esse é outro motivo pelo qual você termina a regra CSS com a propriedade normal sem prefixo. Dessa forma, você pode descartar as versões prefixadas assim que o suporte total do navegador for alcançado.

Prefixos de fornecedores são irritantes, mas temporários

Sim, pode parecer irritante e repetitivo ter que escrever as propriedades 2 a 5 vezes para fazê-lo funcionar em todos os navegadores, mas é uma situação temporária. Por exemplo, apenas alguns anos atrás, para definir um canto arredondado em uma caixa, você tinha que escrever:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px; 

Mas agora que os navegadores passaram a oferecer suporte total a esse recurso, você realmente só precisa da versão padronizada:

border-radius: 10px 5px; 

O Chrome suporta a propriedade CSS3 desde a versão 5.0, o Firefox adicionou na versão 4.0, Safari adicionou na 5.0, Opera na 10.5, iOS na 4.0 e Android em 2.1. Mesmo o Internet Explorer 9 oferece suporte sem um prefixo (e o IE 8 e inferior não era compatível com ou sem prefixos).

Lembre-se de que os navegadores sempre estarão mudando e abordagens criativas para suportar navegadores mais antigos serão necessárias, a menos que você esteja planejando construção de páginas da web que estão anos atrás dos métodos mais modernos. No final, escrever prefixos de navegador é muito mais fácil do que localizar e explorar erros que provavelmente serão corrigidos em uma versão futura, exigindo que você encontre outro erro para explorar e assim por diante.