Mateus Souza

Conversas sobre desenvolvimento web

Categorias »

Afinal de Contas, Quantos Vendors (Prefixos) CSS Existem?

1

Quem já trabalha com CSS3 no mínimo já fez essa pergunta várias vezes: quantos vendors/prefixos CSS exitem e quais devo usar? Vamos de uma vez por todas responder a esta pergunta!

Primeiramente para quem não está a par do que é um vendor, vou explicar rapidamente para que você entenda:

Vendor é um especificação própria de uma enginer, uma extensão prevista pelo W3C para os navegadores criarem suas próprias propiedades; Geralmente usadas na fase de testes ou para debugar o comportamento/resultado. A sintax para um vendor é a seguinte (não se preoculpe, você não vai precisar desenvolver um vendor, a não ser que esteja desenvolvendo um navegador :)):

-vendor-aPropriedadeCSS

Exemplo:

-vendor-border-radius: 10px;

Basicamente é adicionado um prefixo a propriedade CSS, onde somente a própria enginer que desenvolveu a vendor irá entender. Ok, mas onde eu me encaixo nisto?

Nem todos os nagevadores/enginers suportam as novidades CSS3 com a propriedade escrita de forma padrão (sem os vendors), então temos que recorrer aos vendors/prefixos para garantir uma compatibilidade maior. Entendeu agora?

Veja quantos vendors existem e quem é o responsável por ele:

Prefixo Organização
-ms-, mso- Microsoft
-moz- Mozilla
-o-, -xv- Opera Software
-atsc- Advanced Television Standards Committee
-wap- The WAP Forum
-khtml- KDE
-webkit- Apple
-prince- YesLogic
-ah- Antenna House
-hp- Hewlett Packard
-ro- Real Objects
-rim- Research In Motion

Atualmente há 12 VENDORS, sem contar a variação pela enginer. Graças a Deus não precisamos usar todos, imagine só, para um efeito em CSS3, ter de digitar 12 linhas a mais!

Quantos vendors devo usar?

Eu recomendo usar no mínimo 2, e no máximo 4, visto que muitos desses não há a necessidade. Os recomendados são (por ordem de importância):

-moz- Gecko (Mozilla)

webkit- Webkit

-khtml- KDE

-o- Opera

Sendo assim ao invés de escrever:

border-radius: 10px;

Escreva:

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-o-border-radius: 10px;

Ou então:

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Até a próxima.

1 Comentário

  1. João disse:
    11 de fevereiro de 2011 às 20:35

    Excelente informação!

Faça um Comentário

Todas as Categorias