什么是WebKit以及它与CSS有什么关系?

时间:2010-08-12 13:30:45

标签: css webkit cross-browser rendering-engine

最近,我一直看到标签“webkit”的问题。这些问题通常倾向于与CSS,jQuery,布局,交叉浏览器兼容性问题等相关的基于Web的问题......

那么这个“webkit”是什么?它与CSS有什么关系?我还注意到各种网站的源代码中有很多-webkit-...属性。这两个有关系吗?

更新

所以从目前为止的答案来看...... WebKit是Safari / Chrome的HTML / CSS网络浏览器渲染引擎。 IE / Opera / Firefox是否有这样的引擎?使用其中一个的优点和缺点是什么?我可以在Firefox中使用WebKit功能吗?

最终的问题...... IE支持WebKit吗?

更新2

所有主流浏览器都使用不同的渲染引擎。我想这就是为什么有这么多跨浏览器兼容性问题的一个重要原因!

那么,是否有某种项目或移动到标准渲染引擎,所有浏览器都会使用? HTML5会结束跨浏览器兼容性问题吗?

14 个答案:

答案 0 :(得分:138)

  

更新:显然,WebKit是Safari / Chrome的HTML / CSS网络浏览器渲染引擎。 IE / Opera / Firefox是否有这样的引擎?使用其中一个的优点和缺点是什么?我可以在Firefox中使用WebKit功能吗?

每个浏览器都有一个渲染引擎支持来绘制HTML / CSS网页。

  • IE→Trident (停用)
  • Edge→EdgeHTML(Trident的清理叉)
  • Firefox→Gecko
  • Opera→Presto (自2013年2月起不再使用Presto,现在考虑Opera = Chrome)
  • Safari→WebKit
  • Chrome→Blink(WebKit的一个分支)。

请参阅Comparison of web browser engines以获取不同领域的比较列表。

  

最终的问题是...... IE支持WebKit吗?

不是原生的。

答案 1 :(得分:89)

除了@KennyTM所说的内容:

  • IE
    • 引擎:Trident
    • CSS-prefix:-ms
  • 边线
  • 火狐
    • 引擎:Gecko
    • CSS-prefix:-moz
    • 引擎: Presto Blink 1
    • CSS前缀:-o(Presto)和-webkit(闪烁)
  • Safari浏览器
    • 引擎:WebKit
    • CSS-prefix:-webkit

1) 2013年2月12日Opera(版本15+)announces他们从他们自己的引擎Presto转移到名为Blink的WebKit。

2) 2013年4月3日Google(Chrome版本28+)announces他们将使用基于WebKit的Blink引擎。

3) 2018年12月6日,微软(2019年初预览版本准备就绪)announces他们将使用基于WebKit的Blink引擎。

答案 2 :(得分:34)

Webkit是Safari和Chrome使用的网络浏览器渲染引擎(其中包括,但这些是流行的)。

CSS选择器上的-webkit前缀是此引擎要处理的属性,与-moz属性非常相似。我们中的许多人希望这一点消失,例如-webkit-border-radius将被标准border-radius取代,并且您不需要为多个浏览器的相同事物制定多个规则。这实际上是“预先指定”功能的结果,这些功能旨在不会干扰标准版本。

对于您的更新: ...不,它与IE无关,IE至少在9之前使用了另一个名为Trident的渲染引擎。

答案 3 :(得分:32)

这已得到回答和接受,但如果有人仍然想知道为什么今天的事情有些混乱,你必须阅读:

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

它很好地了解了gecko,webkit和其他主要渲染引擎是如何演变的,以及导致用户代理字符串混乱的当前状态的原因。

引用TL的最后一段; DR目的:

  

然后谷歌构建了Chrome,Chrome使用了Webkit,它就像Safari一样,希望为Safari构建页面,因此假装是Safari。因此Chrome使用WebKit,假装是Safari,WebKit假装是KHTML,KHTML假装是Gecko,所有浏览器都假装是Mozilla,Chrome称自己为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,用户代理字符串为一个完整的混乱,几乎无用,每个人都假装成其他人,并且充满了混乱。

答案 4 :(得分:7)

  

最终的问题...... IE支持WebKit吗?

有点儿。查看 Chrome Frame ,它是Internet Explorer的一个插件,可以使用Webkit引擎。唯一的怪癖是你必须说服访问者安装插件。

更新

不再维护或支持Chrome Frame ...

答案 5 :(得分:6)

  

WebKit是一个专为此设计的布局引擎   允许Web浏览器呈现Web   页面。 WebKit引擎提供了一个   用于显示Web内容的类集   在Windows中,并实现浏览器   以下链接时的功能   用户点击,管理一个   后退列表,并管理   最近访问过的网页历史。

     

WebKit最初是作为一个创建的   KHTML的分支作为布局引擎   Apple的Safari;它可以移植到很多人   其他计算平台。也是   用于Google的Chrome浏览器。

     

WebKit的WebCore和JavaScriptCore   组件在GNU下可用   较小的通用公共许可证,以及   WebKit的其余部分可在a下获得   BSD式许可证。

来源Wikipedia

有关布局引擎的更多信息,请查看here

答案 6 :(得分:5)

Webkit是Chrome和Safari使用的HTML呈现引擎。

它支持许多以-webkit-为前缀的自定义CSS属性。

答案 7 :(得分:4)

Webkit是流行的浏览器Safari和Chrome以及其他浏览器中使用的渲染引擎。

答案 8 :(得分:4)

Webkit是Apple的Safari浏览器和Google的Chrome中使用的html / css渲染引擎。 使用-webkit的css值前缀是特定于webkit的,它们通常是CSS3或其他非标准化功能。

回答更新2 w3c是试图标准化这些东西的主体,他们编写规则,然后程序员编写他们的渲染引擎来解释这些规则。所以基本上w3c说DIV应该以“这种方式”工作,然后引擎编写者使用该规则来编写代码,规则的任何错误或错误解释都会导致兼容性问题。

答案 9 :(得分:4)

-webkit-只是适用于Chrome,Safari,Opera和iOS浏览器的一组。他们都有共同的祖先,因此他们的功能/局限性(在运行CSS和Javascript时)仅限于该小组。

开发人员将在-webkit-后面加上一些代码,这意味着该代码将仅在Chrome,Safari,Opera和iOS浏览器上运行。这是完整的列表:

-webkit-(Chrome,Safari,Opera的较新版本,几乎所有iOS浏览器(包括Firefox for iOS);基本上是任何基于WebKit的浏览器)

-moz-(Firefox)

-o-(旧的WebKit,Opera版本)

-ms-(Internet Explorer和Microsoft Edge)

答案 10 :(得分:3)

我作为网站设计师遇到的一个常见问题是很多人使用IE6 +。通常没什么大不了的,除了在CSS中我必须添加多个渲染语法来解析每个浏览器的每个请求。如果有一个CSS的通用渲染设置,IE可以像Chrome / FF / Opera和webkit一样轻松阅读,那将是非常好的。 IE的问题在于,如果我不使用所有正确的CSS样式和渲染,我的网站使用除IE之外的每个浏览器看起来和工作都很好。这可能会成为一个不快乐,顽固的IE客户。

例如:我们说我需要1px的灰色边框,边框半径为10%。对于Chrome和其他人,我使用webkit属性。现在,对于IE,我必须使用简单的旧CSS值“border:1px solid#E5E5E5”和“border-radius:10%”添加单独的CSS样式。所有IE浏览器版本都不能保证一个积极的结果,但在大多数情况下,这种方法对我和其他许多人来说都很好。

答案 11 :(得分:2)

尽管这是一篇较旧的帖子,但还有另一种方法可以渲染旧版本的Internet Explorer。 -webkit作为CSS Vendor Prefix时,您还可以下载一些JS应用程序并将它们放在HTML的HEAD底部。

尝试使用Modernizr,HTML5 Shiv和Respond.js。这些是使用polyfill的惊人的IE兼容polyfill脚本,以及其他有助于在IE9及以下版本中更好地呈现HTML5元素的资源。

要使用这些polyfill,只需添加HTML布尔逻辑来放置它们,如果浏览器小于所需的IE版本。示例代码是:

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

答案 12 :(得分:0)

有关WebEngines特别是webKit及其开发人员的详细文档,您可以阅读: WebKit

答案 13 :(得分:0)

Webkit是流行的浏览器Safari和Chrome以及其他浏览器中使用的渲染引擎 每个浏览器都由渲染引擎支持,以绘制HTML / CSS网页。

IE→Trident(停产) Edge→EdgeHTML(Trident的清理叉) Firefox→Gecko Opera→Presto(自2013年2月起不再使用Presto,现在考虑Opera = Chrome) Safari→WebKit Chrome→Blink(WebKit的一个分支)。