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

277

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?

Hristo
fonte
1
Sua pergunta final é efetivamente "Can IE ser dito para tornar as coisas ainda não foi programadas para tornar?", E a resposta é não
Gareth
O mecanismo de renderização do firefox é chamado de lagartixa. isto é, usa seu próprio mecanismo primário.
troelskn
@Gareth ... obrigado. era exatamente isso que eu esperava NÃO ouvir :) Nesse caso, espero que o IE possa começar a ser compatível em breve ... e que as pessoas parem de usar o IE6!
Hristo
6
Confira css3pie.com para obter algumas funcionalidades do webkit adicionadas ao IE por meio do CSS.
precisa saber é o seguinte
O WebKit é o pior mecanismo de renderização de HTML de todos os tempos, com exceção de nenhum. Não é ruim, significando ruim, para citar a NWA, mas ruim significa bom.
Dagg Nabbit

Respostas:

168

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.

kennytm
fonte
.. obrigado por abordar minha atualização. Portanto, se o IE não oferecer suporte ao WebKit e eu sei que ele não suporta as -moz-propriedades ... como posso fazer o IE aceitar estilos CSS3?
Hristo
@ Hisisto: Dependendo do estilo que você precisa.
Kennytm
Eu não tinha nenhum detalhe em mente ... Só sei que o IE é péssimo quando se trata de compatibilidade entre navegadores e fiquei imaginando se o WebKit era uma maneira de corrigir esse problema.
Hristo
3
deve ser atualizado. Chrome de dev ter bifurcada webkit, e ópera não está usando presto mais tempo
Richard
1
O EdgeHTML também foi descontinuado agora.
DreamTeK 15/01/19
115

Além do que o @KennyTM disse:

  • IE
  • Beira
  • Raposa de fogo
    • Motor: Gecko
    • Prefixo CSS: -moz
  • Ópera
    • Motor: PrestoBlink 1
    • Prefixo CSS: -o(Presto) e -webkit(Blink)
  • Safári
    • Motor: WebKit
    • Prefixo CSS: -webkit
  • cromada

1) 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 .

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

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

Jerone
fonte
2
.. que ótima informação! Então, os diferentes mecanismos de renderização ignorariam esses prefixos? Ie Firefox ignorar -msie, -o, -webkit; Será que Webkit ignorar -moz, -o, -msie; etc ...?
Hristo
1
@Hristo Sim, ele não reconhece qualquer um desses como CSS válido, então ele ignora-los
JKirchartz
1
JKirchartz está correto. Os outros navegadores irão ignorar um ao outro o prefixo css.
Jerone
2
E esse WebKit para o qual o Opera está se mudando é a variedade Chromium, que está se transformando em Blink.
BoltClock
41

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 .

Nick Craver
fonte
2
Então, pode -webkit-ser usado no Firefox para renderização avançada de recursos CSS3?
Hristo
1
Não, o Firefox usa um mecanismo de renderização chamado Gecko
Gareth
2
@Hristo - Firefox usa algumas propriedades semelhantes, mas eles são chamados -moz(para mozilla), ele será ignorado -webkitpapéis ao analisar estilos :)
Nick Craver
35

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.

CodeExpress
fonte
Visite o link acima, seu clímax informativo e final é hilário.
Arun Prasad ES
10

-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)

Tycholiz
fonte
9

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…

edgerunner
fonte
2
O Chrome Frame não é mais suportado.
Eric Willigers
Sim. Foi, na melhor das hipóteses, uma solução para o que faltava. Após oito anos, é hora de o IE abrir caminho para navegadores compatíveis adequados.
Edgerunner
A Microsoft quer que o IE vá embora. É fornecido com o Windows 10 para fins de compatibilidade com versões anteriores.
RJ Dunnill 13/02/19
8

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

Sotiris
fonte
7

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-.

SLaks
fonte
5

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

recursivo
fonte
5

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.

JKirchartz
fonte
4

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.

AJADMIN.COM
fonte
3

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>

CoyoteCMS
fonte
1

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

hamidfzm
fonte
1

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) .

Nabeel khan
fonte