O que são -moz - e -webkit-?

O Que são -moz - e -webkit-?

Propriedades do CSS a partir de -webkit-, -moz-, -ms- ou -o- são chamados prefixos do Fornecedor.

Por que diferentes navegadores adicionam prefixos diferentes para o mesmo efeito?

Uma boa explicação dos prefixos do vendedor vem de Peter-Paul Koch de QuirksMode:

Originalmente, o ponto dos prefixos do Fornecedor era permitir aos fabricantes de navegador para começar a suportar CSS experimental declaracao.

Digamos que um grupo de trabalho W3C está a discutir uma declaração de grelha (que, incidentalmente,não seria uma idéia tão má). Além disso, digamos que algumas pessoas criam um rascunho de especificação, mas outras discordam alguns dos detalhes. Como sabemos, este processo pode levar séculos. Além disso, digamos que a Microsoft, como experiência, decide aplicar a grelha proposta. Neste momento, a Microsoft não pode ter a certeza de que o caderno de especificações não vai mudar. Por conseguinte, de adicionar a grade ao seu CSS, adiciona -ms-grid.

O prefixo do Fornecedor tipo de diz: "esta é a interpretação Microsoft de uma proposta em curso."Assim, se a definição final da grelha é diferente, a Microsoft pode adicionar uma nova grelha de propriedades CSS sem quebrar páginas que dependem-ms-grid.

ACTUALIZAÇÃO A PARTIR DO ANO 2016

Como este Posto tem 3 anos, é importante mencione que agora a maioria dos fornecedores entende que esses prefixos estão apenas criando código duplicado não-necessário e que a situação em que você precisa especificar 3 regras CSS diferentes para obter um efeito trabalhando em todo o navegador é um indesejado.

Tal como mencionado emEste glossário sobre a vista do Mozilla em Vendor Prefix on May 3, 2016,

Os vendedores de navegador estão agora a tentar livrar-se do prefixo do fornecedor para experiências recurso. Eles notaram que os desenvolvedores da Web estavam usando-os. no sítios Web de produção, poluindo o espaço global e tornando-o mais é difícil para os desfavorecidos terem um bom desempenho.

Por exemplo, há apenas alguns anos, para colocar um canto arredondado numa caixa que tinha de 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 chegaram a suportar totalmente esta funcionalidade, você realmente só precisa da versão padronizada:

border-radius: 10px 5px;

Encontrar as regras certas para todos os navegadores

Como ainda não existe um padrão para as regras comuns do CSS que funcionam em todos os navegadores, você pode usar ferramentas como caniuse.com para verificar o Suporte de uma regra em todos os navegadores principais.

Também pode utilizar pleeease.io/play a Pleeease é um nó.aplicação js que facilmente processa o seu CSS. Simplifica o uso de pré-processadores e combina-os com os melhores pós-processadores. Ele ajuda a criar folhas de estilo limpas, apoiar navegadores mais antigos e oferece uma melhor manutenção.

Entrada:

a {
  column-count: 3;
  column-gap: 10px;
  column-fill: auto;
}

Resultado:

a {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -webkit-column-fill: auto;
     -moz-column-fill: auto;
          column-fill: auto;
}