什么是 WebKit，它与 CSS 有什么关系？答案

【问题标题】：What is WebKit and how is it related to CSS?什么是 WebKit，它与 CSS 有什么关系？
【发布时间】：2011-03-28 22:39:53
【问题描述】：

最近，我看到了带有“webkit”标签的问题。此类问题通常是与 CSS、jQuery、布局、跨浏览器兼容性问题等相关的基于 Web 的问题...

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

更新

所以从目前的答案来看... WebKit 是一个用于 Safari/Chrome 的 HTML/CSS Web 浏览器渲染引擎。是否有适用于 IE/Opera/Firefox 的此类引擎，使用其中一种引擎有什么区别、优缺点？例如，我可以在 Firefox 中使用 WebKit 功能吗？

终极问题... IE 是否支持 WebKit？

更新 2

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

那么，是否有某种项目或迁移到所有浏览器都将使用的标准渲染引擎？ HTML5 会终结跨浏览器的兼容性问题吗？

【问题讨论】：

你的最后一个问题实际上是“可以告诉 IE 渲染它没有被编程渲染的东西吗？”，答案是否定的
firefox 的渲染引擎叫做壁虎。即使用他们自己的专有引擎。
@Gareth...谢谢。这正是我不希望听到的 :) 在这种情况下，我希望 IE 可以很快开始兼容......并且人们停止使用 IE6！
查看css3pie.com，了解通过 CSS 添加到 IE 的一些 webkit 功能。
WebKit 是有史以来最糟糕的 HTML 渲染引擎，没有之一。引用 NWA 的话，不是坏的意思是坏的，但坏的意思是好的。

标签： css webkit cross-browser rendering-engine

【解决方案1】：

更新：很明显，WebKit 是一个用于 Safari/Chrome 的 HTML/CSS 网络浏览器渲染引擎。是否有适用于 IE/Opera/Firefox 的此类引擎，使用其中一种引擎有什么区别、优缺点？例如，我可以在 Firefox 中使用 WebKit 功能吗？

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

~~IE → Trident~~（已停产）
Edge → ~~EdgeHTML（Trident 的清理分叉）~~（Edge 在 2019 年切换到 Blink）
火狐→Gecko
~~Opera → Presto~~（自 2013 年 2 月起不再使用 Presto，考虑 Opera = Chrome，因此现在是 Blink）
Safari → WebKit
Chrome → Blink（Webkit 的一个分支）。

请参阅Comparison of web browser engines 了解不同领域的比较列表。

终极问题……IE是否支持WebKit？

不是原生的。

【讨论】：

.. 感谢您处理我的更新。因此，如果 IE 不支持 WebKit，并且我知道它不支持 -moz- 属性...如何让 IE 接受 CSS3 样式？
@Hristo：看你需要哪种风格。
我没有任何特别的想法......我只知道 IE 在跨浏览器兼容性方面很糟糕，我想知道 WebKit 是否可以解决这个问题。跨度>
应该更新。 Chrome 开发者分叉了 webkit，opera 不再使用 presto
EdgeHTML 现已停产。

【解决方案2】：

除了@KennyTM 所说的：

IE
- 引擎：Trident
- CSS 前缀：-ms
边缘
- 引擎：~~EdgeHTML~~ → Blink³
- CSS 前缀：-ms
火狐
- 引擎：Gecko
- CSS 前缀：-moz
歌剧
- 引擎：~~Presto~~ → Blink¹
- CSS 前缀：-o（Presto）和-webkit（闪烁）
Safari
- 引擎：WebKit
- CSS 前缀：-webkit
铬
- 引擎：~~WebKit~~ → Blink²
- CSS 前缀：-webkit

¹⁾ 2013 年 2 月 12 日，Opera（版本 15+）announces 他们从自己的引擎 Presto 迁移到名为 Blink 的 WebKit。

²⁾ 2013 年 4 月 3 日 Google（Chrome 版本 28+）announces 他们将使用基于 WebKit 的 Blink 引擎。

³⁾ 2018 年 12 月 6 日，Microsoft（Microsoft Edge 79+ 稳定版）announces 他们将使用基于 WebKit 的 Blink 引擎。

【讨论】：

.. 这是很好的信息！那么不同的渲染引擎会忽略这些前缀吗？即 Firefox 会忽略 -msie、-o、-webkit； Webkit 会忽略-moz、-o、-msie；等等...？
@Hristo 是的，它不会将其中任何一个识别为有效的 CSS，因此它会忽略它们
JKirchartz 是正确的。其他浏览器将忽略彼此的 css-prefix。
Opera 正在转向的那个 WebKit 是 Chromium 变种，它本身正在变成 Blink。

【解决方案3】：

Webkit 是 Safari 和 Chrome（以及其他，但这些是流行的）使用的网络浏览器渲染引擎。

CSS 选择器上的-webkit 前缀是仅该引擎打算处理的属性，与-moz 属性非常相似。我们中的许多人都希望这种情况消失，例如-webkit-border-radius 将被标准border-radius 取代，并且对于多个浏览器相同事物您将不需要多个规则。这实际上是“预规范”功能的结果，这些功能旨在不干扰标准版本。

对于您的更新：...不，它实际上与 IE 无关，至少在 9 之前的 IE 使用称为 Trident 的不同渲染引擎。

【讨论】：

那么 -webkit- 可以像 Firefox 一样用于 CSS3 功能的高级渲染吗？
不，Firefox 使用名为 Gecko 的渲染引擎
@Hristo - Firefox 使用了一些类似的属性，但它们被称为 -moz（对于 mozilla），它会在解析样式时忽略 -webkit 角色:)

【解决方案4】：

这已被回答并接受，但如果有人仍然想知道为什么今天事情有点混乱，你必须阅读这个：

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

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

为 TL;DR 目的引用最后一段：

然后 Google 构建了 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，用户代理字符串是完整的乱七八糟，几乎没用，每个人都伪装成其他人，混乱比比皆是。

【讨论】：

访问上面的链接，它的信息丰富，最后的高潮很有趣。

【解决方案5】：

-webkit- 只是 Chrome、Safari、Opera 和 iOS 浏览器适合的组。它们都有一个共同的祖先，因此它们的功能/限制（在运行 CSS 和 Javascript 时）通常仅限于该组。

开发人员会在-webkit- 后面加上一些代码，这意味着该代码只能在 Chrome、Safari、Opera 和 iOS 浏览器上运行。这是一个完整的列表：

-webkit-（Chrome、Safari、较新版本的 Opera、几乎所有 iOS 浏览器（包括 Firefox for iOS）；基本上，任何基于 WebKit 的浏览器）

-moz- (火狐)

-o-（旧的，WebKit 之前的，Opera 版本）

-ms-（Internet Explorer 和 Microsoft Edge）

【讨论】：

【解决方案6】：

终极问题……IE是否支持WebKit？

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

更新

Chrome Frame 不再维护或支持……

【讨论】：

Chrome Frame 不再受支持。
是的。这充其量只是一个权宜之计。 8 年后，是时候让 IE 让位于适当的兼容浏览器了。
微软希望 IE 消失。出于向后兼容的目的，它随 Windows 10 一起提供。

【解决方案7】：

WebKit 是一个布局引擎，旨在允许网页浏览器呈现网页页。 WebKit 引擎提供了一个一组用于显示 Web 内容的类在windows中，并实现浏览器诸如以下链接之类的功能被用户点击，管理一个后退列表，并管理一个最近访问过的页面的历史记录。

WebKit 最初是作为一个 KHTML 的 fork 作为布局引擎苹果的 Safari；它对许多人来说都是便携的其他计算平台。也是在 Google 的 Chrome 浏览器中使用。

WebKit 的 WebCore 和 JavaScriptCore 组件在 GNU 下可用较小的通用公共许可证，以及 WebKit 的其余部分可在 BSD 风格的许可证。

来源Wikipedia

有关布局引擎的更多信息，您可以查看here

【讨论】：

【解决方案8】：

Webkit 是 Chrome 和 Safari 使用的 HTML 渲染引擎。

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

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

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

尝试使用 Modernizr、HTML5 Shiv 和 Respond.js。这些是令人惊叹的 IE 兼容 polyfill 脚本，它们使用 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>

【讨论】：

【解决方案13】：

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

IE → Trident（已停产） Edge → EdgeHTML（Trident 的清理分支）火狐 → 壁虎 Opera → Presto（自 2013 年 2 月起不再使用 Presto，现在考虑 Opera = Chrome） Safari → WebKit Chrome → Blink（WebKit 的一个分支）。

【讨论】：

【解决方案14】：

关于WebEngines 尤其是webKit 及其开发人员的优秀文档，您可以在以下位置阅读： WebKit

【讨论】：