Prefixos no CSS: O que são e quando usar

Todos os dias estão a sair novidades em termos de CSS, HTML, Javascript e afins... :)

E todos os dias os navegadores que utilizamos para passear pela NET também aparecem com novas funções, propriedades, novas maneiras de visualizar os sites, etc...

E é aqui, no desenvolvimento de cada navegador, que queria chegar... Porque é aqui que está a razão porque existem alguns prefixos nos estilos CSS que colocamos para dar esta ou aquela aparência a este ou aquele elemento no nosso site ou blogue.

Basicamente todos os dias estão sendo testadas novas funcionalidades no CSS... algumas que há poucos anos só eram possíveis com Javascript, como transições e animações, hoje são comuns somente com CSS mas antes de estarem disponíveis em TODOS os navegadores actuais, foram desenvolvidas e aperfeiçoadas por somente por um ou outro navegador que nessa fase de testes e experimentação utilizou o tal prefixo que são uma maneira dos fabricantes de navegadores adicionarem suporte a novos recursos CSS antes que esses recursos sejam totalmente suportados nos restantes navegadores.

Esses prefixos tornaram-se muito populares com a introdução do CSS3 há alguns anos.

Quando o CCS3 foi introduzido pela primeira vez, várias novas propriedades começaram a surgir em navegadores diferentes em momentos diferentes. Por exemplo, os navegadores equipados com Webkit (Safari e Chrome) foram os primeiros a introduzir algumas das propriedades no estilo de animação, como transformação e transição. Ao usar propriedades prefixadas pelo fornecedor, os web designers podem incluir essas novas propriedades em seus trabalhos e vê-los nos navegadores que as suportam imediatamente, em vez de esperar que todos os outros navegadores se actualizem.

Ou seja, os prefixos no CSS são chatos de utilizar no inicio, já que temos que escrever a mesma propriedade 4 ou 5 vezes mas por regra são um aborrecimento temporário. ;)

Os prefixos no CSS mais comuns são:

Google Chrome

-webkit-

Firefox

-moz-

Microsoft Edge

-ms-

Safari

-webkit-

Opera

-o-

iOS Safari

-webkit-

Internet Explorer

-ms-

Opera Mini

-o-

Android Browser

-webkit-

Opera Mobile

-o-

Blackberry

-webkit-

Firefox p/Android

-moz-

IE Mobile

-ms-

UC p/Android

-webkit-

Chrome p/Android

-webkit-

Konqueror

-khtml-

Vou exemplificar como colocar uma borda curva/redonda num elemento, algo que actualmente já não necessita de prefixos mas que ainda não há muitos anos recordo-me da malta usar truques com imagens para obter esse efeito, nem sempre com bons resultados nem com as possibilidades actuais. No exemplo a seguir vou também comentar cada propriedade para ser mais fácil de entender como funcionam os prefixos:

.exemplo-borda-redonda { /* A class do elemento onde vamos arredondar a borda */
  -webkit-border-radius: 50%;
/* Propriedade a ser lida em navegadores Webkit, tal como o Chrome e Safari. */
   -khtml-border-radius: 50%;
/* Propriedade a ser lida no navegador Konqueror, raramente utilizada actualmente. */
     -moz-border-radius: 50%;
/* Propriedade a ser lida em navegadores Mozilla, tal como o Firefox. */
      -ms-border-radius: 50%;
/* Propriedade a ser lida em navegadores Microsof, tal como o Edge e versões mais modernas do Internet Explorer. */
       -o-border-radius: 50%;
/* Propriedade a ser lida nos navegadores Opera, ainda sendo utilizada mas não muito. */
          border-radius: 50%;
/* Propriedade já de acordo com os padrões W3C, a ser lida em qualquer navegador actualizado. Por exemplo para colocar borda arredondada, basta somente escrever como está nesta linha já que esta propriedade actualmente já está suportada em TODOS os navegadores. Podemos variar a curvatura em pixels (px) ou percentagens como eu exemplifico (%) - Ver link ao final do artigo para mais informação */
}

Aconselho a leitura de O que é W3C? para perceberem melhor o que é o W3C. Claro que para as novas funcionalidades sejam apresentadas correctamente convém ter SEMPRE os navegadores actualizados. ;)

Por norma, eu costumo utilizar somente o -webkit- e a versão final sem prefixo quando escrevo os estilos dum elemento aqui no blogue ou em algum site que eu faça o desenho porque há certas propriedades -webkit- já aceites em outros navegadores... a menos que seja algo novo e que ainda não exista suporte mas nesse caso geralmente prefiro mesmo esperar até que essa propriedade esteja já implementada porque assim sei de certeza que vai funcionar para os visitantes do espaço.

Actualmente com os telemóveis, tablets e outros dispositivos moveis é cada vez mais importante ter um bom desenho no CSS para que todos os elementos sejam visualizados da maneira pretendida.

Termino deixando alguns links onde podem ler mais sobre este assunto:

• em, px, pt, cm, in…
• Prefixos vendor
• Afinal de Contas, Quantos Vendors (Prefixos) CSS Existem?
• What CSS to prefix? inglês
• Can I use ? inglês
• Autoprefixer CSS online inglês
• CSS Vendor Prefixes inglês

E por hoje é tudo. ;)

Até breve. :-F

Queres ler outro artigo ao calhas?