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

Posted 2023-03-06

【中文标题】什么是 WebKit，它与 CSS 有什么关系？

【英文标题】：What is WebKit and how is it related to 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 的话，不是坏的意思是坏的，但坏的意思是好的。

【参考方案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