Os prefixos de fornecedores de CSS, também conhecidos como prefixos de navegador CSS, são uma maneira dos 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 do CSS3 há alguns anos.
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 transformação e transição. Usando propriedades com prefixo do fornecedor, os web designers puderam usar esses novos recursos em seu trabalho e vê-los nos navegadores que os suportavam imediatamente, em vez de ter que esperar que todos os outros fabricantes de navegadores os atualizassem!
Prefixos Comuns
Portanto, da perspectiva de um desenvolvedor front-end da web, os prefixos do navegador são usados para adicionar novos recursos CSS a um site, ao mesmo tempo que 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 dos quais é específico para um navegador diferente) são:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -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ê usaria a propriedade de transição conforme mostrado abaixo: -webkit-transit: all 4s facilmente;
-moz-transição: todos os 4s fáceis;
-ms-transição: todos os 4s são fáceis;
-o-transição: todos os 4s fáceis;
transição: toda a facilidade dos 4s;
class = “ql-syntax”> Lembre-se, 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 regras posteriores têm precedência sobre as anteriores se a especificidade for a mesma, então um navegador iria ler a versão do fornecedor de uma regra e usá-la se não for compatível com a normal, mas assim que o fizer, substituirá a versão do fornecedor com a regra CSS real.
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 uma mudança de volta aos dias sombrios de bifurcar o código de um site para oferecer suporte a navegadores diferentes (lembre-se de que “Este site é melhor visualizado no IE“mensagem). Prefixos de fornecedores de CSS não são hacks, no entanto, você não deve ter reservas em usá-los em seu trabalho. Um hack de CSS explora falhas na implementação de outro elemento ou propriedade para fazer com que outra propriedade funcione corretamente. 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 lidou com o modelo de caixa e como o Netscape o interpretou e não têm 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 porque permite que a especificação defina regras para como um propriedade pode ser implementada, enquanto ao mesmo tempo permite que os fabricantes de navegador implementem uma propriedade de uma maneira diferente sem quebrar todo o resto. Além disso, esses prefixos funcionam com propriedades CSS 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. Quer saber qual é o suporte do navegador para um determinado recurso? O site CanIUse.com é um excelente recurso para reunir essas informações e permitir que você saiba quais navegadores e quais versões desses navegadores suportam um recurso no momento.
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 oferece suporte à propriedade CSS3 desde a versão 5.0, o Firefox a adicionou na versão 4.0, o Safari a adicionou na 5.0, Opera em 10.5, iOS em 4.0 e Android em 2.1. Até o Internet Explorer 9 oferece suporte sem prefixo (e o IE 8 e versões anteriores não oferecem suporte com ou sem prefixo). Lembre-se de que os navegadores estarão sempre mudando e serão necessárias abordagens criativas para oferecer suporte a navegadores mais antigos, a menos que você esteja planejando construir 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.
