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.