O que é o fornecedor de CSS ou os prefixos do navegador?

Os prefixos de fornecedores CSS, também conhecidos como prefixos de navegador CSS, são uma forma de os fabricantes de navegadores adicionarem suporte a novos recursos de 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 do CSS3 há alguns anos.

Quando o CCS3 foi introduzido pela primeira vez, várias propriedades excitadas começaram a atingir diferentes navegadores em diferentes momentos. Por exemplo, os navegadores baseados em Webkit (Safari e Chrome) foram os primeiros a introduzir algumas das propriedades de estilo de animação, como transformação e transição. Usando as propriedades prefixadas do fornecedor, os web designers puderam usar esses novos recursos em seu trabalho e visualizá-los nos navegadores que os suportavam imediatamente, em vez de precisar esperar que todos os outros fabricantes de navegadores o acompanhassem!

Portanto, na perspectiva de um desenvolvedor web front-end, os prefixos de navegadores são usados para adicionar novos recursos CSS a um site, enquanto se tem conforto 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 deles específico para um navegador diferente) são:

Android:
-webkit-
Cromada:
-webkit-
Raposa de fogo:
-moz-
Internet Explorer:
-Senhora-
iOS:
-webkit-
Ópera:
-o-
Safári:
-webkit-

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

transição

propriedade como mostrado abaixo:

-webkit- transição: todos os 4s facilidade; -moz- transição: todos os 4s facilidade; -Senhora- transição: todos os 4s facilidade; -o- transição: todos os 4s facilidade;transição: todos os 4s facilidade;

Nota: Lembre-se de que alguns navegadores têm uma sintaxe diferente para determinadas propriedades do que outros, portanto, não presuma que a versão com prefixo do navegador de uma propriedade seja exatamente igual à propriedade padrão. Por exemplo, para criar um gradiente CSS, use o

Gradiente linear
propriedade. O Firefox, o Opera e as versões modernas do Chrome e do Safari usam essa propriedade com o prefixo apropriado, enquanto as versões anteriores do Chrome e do Safari usam a propriedade prefixada

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

A razão pela qual você sempre termina sua declaração com a versão normal e não prefixada da propriedade CSS é para que, quando um navegador suportar a regra, ele use essa. Lembre-se de como o CSS é lido. As regras posteriores têm precedência sobre as anteriores, se a especificidade for a mesma, portanto, um navegador leria a versão de uma regra de fornecedor e a usaria se não suportasse a versão normal, mas, quando o fizer, substituirá a versão do fornecedor por outra. a regra de CSS real.

Os prefixos do fornecedor não são um corte

Quando os prefixos de fornecedores foram introduzidos pela primeira vez, muitos profissionais da Web se perguntaram se eles eram um hack ou uma mudança para os dias sombrios de bifurcar o código de um site para dar suporte a diferentes navegadores (lembre-se daqueles " Este site é melhor visualizado no IE "Prefixos de vendedores de CSS" não são hacks, no entanto, e você não deve ter reservas em usá-los em seu trabalho.

Um hack de CSS explora as falhas na implementação de outro elemento ou propriedade para que outra propriedade funcione corretamente. Por exemplo, o modelo de caixa elimina as falhas exploradas na análise do

família de voz
ou em como os navegadores analisam barras invertidas (

). Mas esses hacks foram usados para resolver o problema da diferença entre como o Internet Explorer 5.5 lidou com o modelo de caixa e como o Netscape o interpretou, e não tem nada a ver com o estilo familiar de voz. Felizmente, esses dois navegadores desatualizados são aqueles com os quais não nos preocupamos atualmente.

Um prefixo de fornecedor não é uma invasão porque permite que a especificação defina regras sobre como uma propriedade pode ser implementada e, ao mesmo tempo, permite que os criadores de navegador implementem uma propriedade de maneira diferente sem quebrar todo o resto. Além disso, esses prefixos estão trabalhando com propriedades CSS que acabará por ser uma parte da especificação . Estamos simplesmente adicionando algum código para obter acesso à propriedade antecipadamente. Essa é outra razão pela qual você finaliza a regra de CSS com a propriedade normal, sem prefixo. Dessa forma, você pode descartar as versões prefixadas assim que o suporte completo ao navegador for alcançado.

Quer saber o que é o suporte do navegador para um determinado recurso? O site CanIUse.com é um recurso maravilhoso para reunir essas informações e informar quais navegadores e quais versões desses navegadores suportam atualmente um recurso.

Os prefixos do fornecedor são irritantes, mas temporários

Sim, pode parecer chato e repetitivo ter que gravar as propriedades de 2 a 5 vezes para que funcione 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: 10 px 5 px;-webkit-border-top-left-radius: 10 px;-webkit-border-top-right-radius: 5 px;-webkit-border-bottom-right-radius: 10 px;-webkit-border-bottom-left-radius: 5 px;border-radius: 10 px 5 px;
Mas agora que os navegadores passaram a suportar totalmente esse recurso, você realmente só precisa da versão padronizada:

border-radius: 10 px 5 px;
O Chrome suporta a propriedade CSS3 desde a versão 5.0, o Firefox a adicionou na versão 4.0, o Safari a adicionou em 5.0, o Opera em 10.5, o iOS em 4.0 e o Android em 2.1. Mesmo o Internet Explorer 9 oferece suporte a ele sem um prefixo (e o IE 8 e inferior não o suportam com ou sem prefixos).

Lembre-se de que os navegadores sempre serão alterados e que serão necessárias abordagens criativas para oferecer suporte a navegadores mais antigos, a menos que você esteja planejando criar páginas da Web que estejam anos atrás dos métodos mais modernos. No final, escrever prefixos de navegador é muito mais fácil do que encontrar 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.