O que é WebKit e como está relacionado com CSS?

Mais recentemente, tenho visto perguntas com a etiqueta "webkit". Tais questões geralmente tendem a ser questões baseadas na web relacionadas com CSS, jQuery, layouts, questões de compatibilidade entre navegadores, etc...

Então, o que é este "webkit" e como se relaciona com o CSS? Eu também notei um monte de propriedades -webkit-... no código fonte para vários sites. Estes dois estão relacionados?

actualizar

Então, pelas respostas até agora... WebKit é um motor de desenho de navegador web HTML/CSS para Safari / cromado. Existem tais motores para IE / Opera / Firefox e quais são as diferenças, prós e contras de usar um sobre o outro? Posso usar recursos WebKit no Firefox, por exemplo?

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

actualizar 2

Todos os navegadores principais usam diferentes motores de renderização. Acho que esta é uma grande razão pela qual há tantos problemas de compatibilidade entre navegador!

Então, há algum tipo de projecto ou movimento para um padrão? motor de renderização que todos os navegadores irão usar? Será que o HTML5 vai acabar com os problemas de compatibilidade entre navegadores?

Author: Mowzer, 2010-08-12

14 answers

Actualização: aparentemente, o WebKit é um motor de desenho de navegador web HTML/CSS para Safari/Chrome. Existem tais motores para IE / Opera / Firefox e quais são as diferenças, prós e contras de usar um sobre o outro? Posso usar recursos WebKit no Firefox, por exemplo?

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

  • IE → Tridente (
  • Edge → EdgeHTML (clean-up fork of Trident)
  • Firefox → Gecko
  • Opera → Presto (já não usa Presto desde fevereiro de 2013, considere Opera = Chrome hoje em dia)
  • Safari → WebKit
  • Chrome → Blink (um garfo do WebKit).

Ver a comparação dos motores do navegador web para uma lista de comparações em diferentes áreas.

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

Nem por isso.

 122
Author: kennytm, 2016-12-10 04:35:41

Além do que @KennyTM disse:

  • IE
  • aresta
  • Firefox
    • MOTOR: Gecko
    • prefixo CSS: -moz
  • Ópera
    • MOTOR: PrestoPiscar1
    • prefixo CSS: -o (Presto) e -webkit (Blink)
  • Safari
    • MOTOR: WebKit
    • prefixo CSS: -webkit
  • cromado

1) em 12 de fevereiro de 2013 Opera (versão 15+) anuncia eles estão a afastar-se do seu próprio motor Presto para o WebKit chamado Blink.

2) em 3 de abril de 2013, o Google (Chrome version 28+) anuncia que vão usar o motor baseado no WebKit Blink.

 76
Author: jerone, 2017-09-02 04:00:04

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

O prefixo -webkit nos selectores de CSS são propriedades que apenas Este motor pretende processar, muito semelhantes às propriedades -moz. Muitos de nós estão esperando que isso desapareça, por exemplo -webkit-border-radius será substituído pelo padrão border-radius e você não vai precisar de várias regras para a mesma coisa para vários navegadores. Este é realmente o resultado de "pré-Especificação" características que são destinadas a não interferir com a versão padrão quando se trata de.

para a sua actualização: ... Não, Não está relacionado com o IE really, ou seja, pelo menos antes do 9 usar um motor de renderização diferente chamado Trident.

 30
Author: Nick Craver, 2015-10-05 08:05:35
Isto foi respondido e aceite, mas se alguém ainda se pergunta porque é que as coisas estão um pouco confusas hoje, terá de ler isto:

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

Dá uma boa ideia de como o gecko, o webkit e outros grandes motores de renderização evoluíram e o que levou ao estado actual das cadeias de utilizador-agente confusas.

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

E depois o Google construiu o Chrome e o Chrome. WebKit usado, e era como Safari, e queria páginas construídas para Safari, e então fingiu ser Safari. E, assim, Chrome utilizados WebKit, e fingiu ser o Safari, e WebKit fingiu ser KHTML, e KHTML fingiu ser Lagartixa, e todos os navegadores fingi ser o Mozilla, e o Chrome chamado 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 seqüência de agente do usuário foi uma bagunça completa, e perto de inútil, e todo mundo fingiu que todos os outros, e a confusão era abundante.
 28
Author: CodeExpress, 2016-09-04 02:23:13
A última pergunta... O WebKit é suportado pelo IE?
Mais ou menos. Check out Moldura Cromada, é um plugin para Internet Explorer que o faz usar o motor Webkit. A única peculiaridade é que você tem que persuadir seus visitantes a instalar o plugin.

Actualizar

A moldura cromática já não é mantida ou suportada...

 6
Author: edgerunner, 2018-06-27 11:09:17
O WebKit é um motor de layout concebido para: permitir que os navegadores web rendam web pagina. O motor WebKit fornece um conjunto de classes para mostrar o conteúdo web no Windows, e implementa o navegador características como os seguintes links quando clicado pelo utilizador, gerindo um lista anterior e gestão de um história das páginas visitadas recentemente.

O WebKit foi originalmente criado como um a bifurcação do KHTML como motor de disposição para Safari da Apple; é portátil para muitos restante plataforma. É também usado no Google Chrome Browser.

Webcore e JavaScriptCore do WebKit os componentes estão disponíveis sob a GNU Menor Licença Pública Geral, e o o resto do WebKit está disponível sob a Licença ao estilo BSD.

Fonte Wikipédia

Para mais informações sobre os motores de layout, pode procurar aqui.
 5
Author: Sotiris, 2010-08-12 13:40:42

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

Suporta uma série de propriedades CSS personalizadas que são prefixadas por -webkit-.

 4
Author: SLaks, 2010-08-12 13:32:30

Webkit é o motor de renderização usado nos navegadores Safari e Chrome, bem como outros.

 3
Author: recursive, 2010-08-12 13:32:45

Webkit é o motor de renderização html/css usado no navegador Safari da Apple, e no Google Chrome. os valores css prefixos com-webkit - são específicos do webkit, são geralmente CSS3 ou outras características não-padronizadas.

Para responder à actualização 2 w3c é o corpo que tenta padronizar essas coisas, eles escrevem as regras, então programadores escrevem seu motor de renderização para interpretar essas regras. Então basicamente w3c diz que DIVs deve trabalhar "desta maneira" O escritor de motores, em seguida, usa essa regra para escrever seu código, quaisquer bugs ou interpretações erradas das regras causam problemas de compatibilidade.

 3
Author: JKirchartz, 2010-08-12 14:00:28

Um problema comum que encontrei como designer de sites é que muitas pessoas usam IE6+. Não é grande coisa normalmente, exceto em CSS eu tenho que adicionar uma sintaxe de renderização múltipla ' para processar cada pedido, por navegador. Seria muito bom se houvesse uma configuração universal de renderização para CSS que IE pode ler tão facilmente quanto Chrome/FF/Opera e webkit. O problema com IE é que se eu não usar todos os estilos CSS adequados e renderização, do que os meus sites olhar e trabalhar grande usando cada navegador, exceto IE. Presente pode ser um cliente infeliz, duro de morrer.

O exemplo é este: digamos que preciso de um 1px, fronteira cinzenta com um raio de fronteira de 10%. Para o Chrome e outros, eu uso a propriedade webkit. Agora, para IE, eu tenho que adicionar estilos CSS seperate usando os valores CSS simples antigos 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 este método funciona bem para mim e muitos outros.
 3
Author: AJADMIN.COM, 2013-11-14 22:35:02
- Webkit-é simplesmente um grupo em que os navegadores Chrome, Safari, Opera e iOS se encaixam. Todos eles têm um ancestral comum, assim muitas vezes suas capacidades / limitações (quando se trata de executar CSS e Javascript) são confinados ao grupo.

Um programador irá colocar-webkit-seguido de algum código, o que significa que o código só irá correr 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 em WebKit) - moz - (Firefox) - o-(antigo, pré-WebKit, versões do Opera) - ms - (Internet Explorer e Microsoft Edge)
 3
Author: Tycholiz, 2018-07-22 05:10:15

Mesmo que este seja um post mais antigo, há também um outro método para renderização de versões mais antigas do Internet Explorer. - webkit enquanto é um prefixo de Fornecedor CSS, Você também pode baixar algumas aplicações JS e colocá-las na parte inferior da cabeça do HTML.

Tente usar o Modernizr, HTML5 Shiv e Responda.js. Estes são scripts de polifill compatíveis IE que usam polifills, e outros recursos que irão ajudar a melhorar a renderização de elementos HTML5 em IE9 e abaixo.

Para utilizar estes polifills, simplesmente adiciona a lógica booleana HTML para colocá-los, se o navegador é menos do que a versão desejo 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>
 2
Author: CoyoteCMS, 2015-03-14 21:14:05

Uma boa documentação sobre WebEngines especialmente webKit e os seus programadores que pode ler em: WebKit

 0
Author: Hamid FzM, 2013-12-13 12:41:40

Webkit é o motor de renderização usado nos navegadores Safari e Chrome, bem como outros Cada navegador é suportado por um motor de renderização para desenhar a página web HTML/CSS.

IE → Trident (descontinuado) Edge → EdgeHTML (clean-up fork of Trident) Firefox → Gecko Opera → Presto (já não usa Presto desde fevereiro de 2013, considere Opera = Chrome hoje em dia) Safari → WebKit Chrome → Blink (um fork do WebKit).

 0
Author: Nabeel khan, 2018-02-23 10:06:10