O que é o WebKit e como ele está relacionado ao CSS?

Mais recentemente, tenho visto perguntas com a tag "webkit". Tais perguntas geralmente tendem a ser baseadas na Web, relacionadas a CSS, jQuery, layouts, problemas de compatibilidade entre navegadores, etc ...

Então, o que é esse "webkit" e como ele se relaciona com o CSS? Também notei muitas -webkit-...propriedades no código fonte de vários sites. Esses dois estão relacionados?

Atualizar

Portanto, a partir das respostas até agora ... O WebKit é um mecanismo de renderização de navegador de HTML / CSS para Safari / Chrome. Existem mecanismos para o IE / Opera / Firefox e quais são as diferenças, prós e contras do uso de um sobre o outro? Posso usar os recursos do WebKit no Firefox, por exemplo?

A última pergunta ... O WebKit é suportado pelo IE?

Atualização 2

Todos os principais navegadores usam diferentes mecanismos de renderização. Acho que essa é uma grande razão pela qual existem tantos problemas de compatibilidade entre navegadores!

Então, existe algum tipo de projeto ou movimento para um mecanismo de renderização padrão que TODOS os navegadores usarão? O HTML5 encerrará os problemas de compatibilidade entre navegadores?

Atualização: aparentemente, o WebKit é um mecanismo de renderização de navegador de HTML / CSS para Safari / Chrome. Existem mecanismos para o IE / Opera / Firefox e quais são as diferenças, prós e contras do uso de um sobre o outro? Posso usar os recursos do WebKit no Firefox, por exemplo?

Todo navegador é suportado por um mecanismo de renderização para desenhar a página da web HTML / CSS.

• IE → Tridente (interrompido)
• Edge → EdgeHTML (fork de limpeza do Trident)(Edge mudou para Blink em 2019)
• Firefox → Gecko
• Opera → Presto(não usa mais o Presto desde fevereiro de 2013, considere o Opera = Chrome e, portanto, o Blink atualmente)
• Safari → WebKit
• Chrome → Blink (um fork do Webkit ).

Consulte Comparação de mecanismos de navegador da web para obter uma lista de comparações em diferentes áreas.

A última pergunta ... o WebKit é suportado pelo IE?

Não nativamente.

Além do que o @KennyTM disse:

• IE
  • Motor: Trident
  • Prefixo CSS: -ms
• Beira
  • Motor: EdgeHTML → Blink ³
  • Prefixo CSS: -ms
• Raposa de fogo
  • Motor: Gecko
  • Prefixo CSS: -moz
• Ópera
  • Motor: Presto → Blink ¹
  • Prefixo CSS: -o(Presto) e -webkit(Blink)
• Safári
  • Motor: WebKit
  • Prefixo CSS: -webkit
• cromada
  • Motor: WebKit → Piscar ²
  • Prefixo CSS: -webkit

¹⁾ Em 12 de fevereiro de 2013, o Opera (versão 15+) anuncia que eles estão se mudando do seu próprio mecanismo Presto para o WebKit chamado Blink .

²⁾ Em 3 de abril de 2013, o Google (versão Chrome 28+) anuncia que usará o mecanismo Blink baseado no WebKit .

³⁾ Em 6 de dezembro de 2018, a Microsoft (Microsoft Edge 79+ estável) anuncia que usará o mecanismo Blink baseado no WebKit .

O Webkit é um mecanismo de renderização de navegador da web usado pelo Safari e Chrome (entre outros, mas esses são os mais populares).

O -webkitprefixo nos seletores CSS são propriedades que apenas esse mecanismo deve processar, muito semelhantes às -mozpropriedades. Muitos de nós esperamos que isso desapareça, por exemplo -webkit-border-radius, será substituído pelo padrão border-radiuse você não precisará de várias regras para o mesmo coisa em vários navegadores. Este é realmente o resultado de recursos de "pré-especificação" que não interferem com a versão padrão quando se trata.

Para sua atualização: ... não, na verdade não está relacionado ao IE, pelo menos antes do 9 usa um mecanismo de renderização diferente chamado Trident .

Isso foi respondido e aceito, mas se alguém ainda está se perguntando por que as coisas estão um pouco bagunçadas hoje, você terá que ler o seguinte:

http://webaim.org/blog/user-agent-string-history/

Ele fornece uma boa idéia de como a lagartixa, o kit de web e outros mecanismos de renderização principais evoluíram e o que levou ao estado atual das seqüências de caracteres de agente do usuário bagunçadas.

Citando o último parágrafo para fins de TL; DR:

E então o Google construiu o Chrome, e o Chrome usou o Webkit, e era como o Safari, e queria páginas criadas para o Safari e, portanto, fingia ser o Safari. E assim, o Chrome usou o WebKit, e fingiu ser Safari, e o WebKit fingiu ser KHTML, e o KHTML fingiu ser Gecko, e todos os navegadores fingiram ser Mozilla, e o Chrome se autodenominou Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13, e a sequência do agente do usuário era uma bagunça completa, e quase inútil, e todo mundo fingia ser todo mundo, e a confusão era abundante.

-webkit-é simplesmente um grupo no qual os navegadores Chrome, Safari, Opera e iOS se encaixam. Todos eles têm um ancestral comum; portanto, seus recursos / limitações (quando se trata de executar CSS e Javascript) estão confinados ao grupo.

Um desenvolvedor colocará -webkit-seguido por algum código, o que significa que o código será executado apenas nos navegadores Chrome, Safari, Opera e iOS. Aqui está uma lista completa:

-webkit- (Chrome, Safari, versões mais recentes do Opera, quase todos os navegadores iOS (incluindo Firefox para iOS); basicamente, qualquer navegador baseado no WebKit)

-moz- (Raposa de fogo)

-o- (Antigo, pré-WebKit, versões do Opera)

-ms- (Internet Explorer e Microsoft Edge)

A última pergunta ... O WebKit é suportado pelo IE?

Mais ou menos. Confira o Chrome Frame , é um plug-in para o Internet Explorer que usa o mecanismo Webkit. O único problema é que você precisa convencer seus visitantes a instalar o plug-in.

Atualizar

O Chrome Frame não é mais mantido ou suportado…

O WebKit é um mecanismo de layout desenvolvido para permitir que navegadores renderizem páginas da web. O mecanismo WebKit fornece um conjunto de classes para exibir o conteúdo da Web no Windows e implementa recursos do navegador, como os links a seguir quando clicados pelo usuário, o gerenciamento de uma lista de retrocessos e o histórico de páginas visitadas recentemente.

O WebKit foi originalmente criado como um fork do KHTML como o mecanismo de layout do Safari da Apple; É portátil para muitas outras plataformas de computação. Também é usado no navegador Chrome do Google.

Os componentes WebCore e JavaScriptCore do WebKit estão disponíveis sob a Licença Pública Geral Menor GNU e o restante do WebKit está disponível sob uma licença no estilo BSD.

Origem Wikipedia

Para mais informações sobre os mecanismos de layout, você pode procurar aqui

O Webkit é um mecanismo de renderização HTML usado pelo Chrome e Safari.

Ele suporta várias propriedades CSS personalizadas que são prefixadas por -webkit-.

O Webkit é o mecanismo de renderização usado nos navegadores populares Safari e Chrome, além de outros.

O Webkit é o mecanismo de renderização html / css usado no navegador Safari da Apple e no Chrome do Google. Os prefixos de valores css com -webkit- são específicos do webkit, geralmente são CSS3 ou outros recursos não padronizados.

Para responder à atualização 2, o w3c é o corpo que tenta padronizar essas coisas, eles escrevem as regras e os programadores escrevem seu mecanismo de renderização para interpretar essas regras. Então, basicamente, o w3c diz que os DIVs devem funcionar "Dessa maneira", o criador do mecanismo usa essa regra para escrever seu código, qualquer bug ou má interpretação das regras causa problemas de compatibilidade.

Um problema comum que encontrei como designer de sites é que muitas pessoas usam o IE6 +. Normalmente, não é grande coisa, exceto no CSS. Tenho que adicionar várias sintaxes de renderização para analisar cada solicitação, por navegador. Seria muito bom se houvesse uma configuração de renderização universal para CSS que o IE possa ler tão facilmente quanto o Chrome / FF / Opera e o webkit. O problema com o IE é que, se NÃO usar TODOS os estilos e renderizações CSS apropriados, meus sites terão uma ótima aparência e funcionarão perfeitamente usando todos os navegadores, exceto o IE. Isso pode gerar um cliente infeliz e obstinado do IE.

Exemplo é o seguinte: digamos que eu precise de uma borda cinza de 1px com um raio de borda de 10%. Para o Chrome e outros, eu uso a propriedade webkit. Agora, para o IE, tenho que adicionar estilos CSS separados, usando os antigos e simples valores CSS de "border: 1px solid # E5E5E5" e "border-radius: 10%". Um resultado positivo nem sempre é garantido em todas as versões do navegador IE, mas na maioria das vezes esse método funciona bem para mim e para muitos outros.

Embora essa seja uma postagem mais antiga, também há outro método para renderizar versões mais antigas do Internet Explorer. -webkit enquanto é um prefixo de fornecedor CSS, você também pode fazer o download de alguns aplicativos JS e colocá-los na parte inferior do HEAD do HTML.

Tente usar Modernizr, HTML5 Shiv e Respond.js. Esses são scripts incríveis de polyfill compatíveis com o IE que usam polyfills e outros recursos que ajudarão a renderizar melhor os elementos HTML5 no IE9 e abaixo.

Para usar esses polyfills, basta adicionar a lógica booleana HTML para colocá-los, SE o navegador for menor que a versão desejada do IE. O código de exemplo é:

<head>
<!-- HEAD Elements -->  
<script src="path/to/modernizr.js" type="text/javascript"></script>
<!--[if lt IE 6]>
  <script src="path/to/HTMLSiv.js" type="text/javascript">
  </script>
  <script src="path/to/respond.js" type="text/javascript">
  </script>
<![endif]-->
</head>

Uma boa documentação sobre WebEnginesespecialmente webKite seus desenvolvedores você pode ler em: WebKit

Webkit é o mecanismo de renderização usado nos navegadores populares Safari e Chrome, além de outros. Todo navegador é suportado por um mecanismo de renderização para desenhar a página da Web HTML / CSS.

IE → Trident (descontinuado) Edge → EdgeHTML (fork de limpeza do Trident) Firefox → Gecko Opera → Presto (não usa mais o Presto desde fevereiro de 2013, considere o Opera = Chrome atualmente) Safari → WebKit Chrome → Blink (um fork do WebKit) .