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

What is WebKit and how is it related to CSS?

提问by Hristo

More recently, I have been seeing questions with the tag "webkit". Such questions usually tend to be web-based questions relating to CSS, jQuery, layouts, cross-browers compatibility issues, etc...

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

So what is this "webkit" and how does it relate to CSS? I have also noticed a lot of -webkit-...properties in the source code for various websites. Are these two related?

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

Update

更新

So from the answers so far... WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome. Are there such engines for IE/Opera/Firefox and what are the differences, pros and cons of using one over the other? Can I use WebKit features in Firefox for example?

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

The ultimate question... Is WebKit supported by IE?

最终问题... IE 支持 WebKit 吗？

Update 2

更新 2

All of the major browsers use different rendering engines. I guess this is a big reason why there are so many cross-browser compatibility issues!

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

So, is there some kind of project or movement to a standard rendering engine that ALL browsers will use? Will HTML5 bring an end to the cross-browser compatibility issues?

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

采纳答案by kennytm

Update: So apparently, WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome. Are there such engines for IE/Opera/Firefox and what are the differences, pros and cons of using one over the other? Can I use WebKit features in Firefox for example?

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

Every browser is backed by a rendering engine to draw the HTML/CSS web page.

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

• IE → Trident(discontinued)
• Edge → EdgeHTML(clean-up fork of Trident)(Edge switched to Blinkin 2019)
• Firefox → Gecko
• Opera → Presto(no longer uses Presto since Feb 2013, consider Opera = Chrome, therefore Blinknowadays)
• Safari → WebKit
• Chrome → Blink(a fork of Webkit).

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

See Comparison of web browser enginesfor a list of comparisons in different areas.

有关不同领域的比较列表，请参阅Web 浏览器引擎的比较。

The ultimate question... is WebKit supported by IE?

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

Not natively.

不是原生的。

回答by jerone

Addition to what @KennyTMsaid:

除了@KennyTM所说的：

• IE
  • Engine: Trident
  • CSS-prefix: -ms
• Edge
  • Engine: EdgeHTML→ Blink³
  • CSS-prefix: -ms
• Firefox
  • Engine: Gecko
  • CSS-prefix: -moz
• Opera
  • Engine: Presto→ Blink¹
  • CSS-prefix: -o(Presto) and -webkit(Blink)
• Safari
  • Engine: WebKit
  • CSS-prefix: -webkit
• Chrome
  • Engine: WebKit→ Blink²
  • CSS-prefix: -webkit

• IE
  • 发动机：三叉戟
  • CSS 前缀： -ms
• 边缘
  • 引擎：EdgeHTML→ Blink ³
  • CSS 前缀： -ms
• 火狐
  • 发动机：壁虎
  • CSS 前缀： -moz
• 歌剧
  • 引擎：Presto→闪烁¹
  • CSS 前缀：-o(Presto) 和-webkit(Blink)
• 苹果浏览器
  • 引擎：WebKit
  • CSS 前缀： -webkit
• 铬合金
  • 引擎：WebKit→ Blink ²
  • CSS 前缀： -webkit

¹⁾On February 12 2013 Opera (version 15+) announcesthey moving away from their own engine Presto to WebKit named Blink.

¹⁾2013 年 2 月 12 日，Opera（版本 15+）宣布他们从自己的引擎 Presto 转向名为Blink 的WebKit 。

²⁾On April 3 2013 Google (Chrome version 28+) announcesthey are going to use the WebKit-based Blinkengine.

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

³⁾On December 6 2018 Microsoft (Microsoft Edge 79+ stable) announcesthey are going to use the WebKit-based Blinkengine.

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

回答by Nick Craver

Webkit is a web browser rendering engine used by Safari and Chrome (among others, but these are the popular ones).

Webkit 是 Safari 和 Chrome 使用的 Web 浏览器渲染引擎（除其他外，但这些是流行的）。

The -webkitprefix on CSS selectors are properties that onlythis engine is intended to process, very similar to -mozproperties. Many of us are hoping this goes away, for example -webkit-border-radiuswill be replaced by the standard border-radiusand you won't need multiple rules for the samething for multiple browsers. This is really the result of "pre-specification" features that are intended to not interfere with the standard version when it comes about.

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

For your update:...no it's not related to IE really, IE at least before 9 uses a different rendering engine called Trident.

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

回答by CodeExpress

This has been answered and accepted, but if someone is still wondering why are things a bit messed up today, you'll have to read this:

这已经得到回答并被接受，但如果有人仍然想知道为什么今天的事情有点混乱，你必须阅读以下内容：

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

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

It gives a good idea of how gecko, webkit and other major rendering engines evolved and what led to the current state of messed up user-agent strings.

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

Quoting the last paragraph for TL;DR purposes:

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

And then Google built Chrome, and Chrome used Webkit, and it was like Safari, and wanted pages built for Safari, and so pretended to be Safari. And thus Chrome used WebKit, and pretended to be Safari, and WebKit pretended to be KHTML, and KHTML pretended to be Gecko, and all browsers pretended to be Mozilla, and Chrome called itself 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, and the user agent string was a complete mess, and near useless, and everyone pretended to be everyone else, and confusion abounded.

然后谷歌构建了 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，用户代理字符串一塌糊涂，几乎没用，每个人都假装是其他人，混乱比比皆是。

回答by Tycholiz

-webkit-is simply a group that Chrome, Safari, Opera and iOS browsers fit into. They all have a common ancestor, so often their capabilities/limitations (when it comes to running CSS and Javascript) are confined to the group.

-webkit-只是 Chrome、Safari、Opera 和 iOS 浏览器适合的一组。他们都有一个共同的祖先，所以他们的能力/限制（当涉及到运行 CSS 和 Javascript 时）通常仅限于该组。

A developer will place -webkit-followed by some code, meaning that the code will only run on Chrome, Safari, Opera and iOS browsers. Here is a complete list:

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

-webkit-(Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)

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

-moz-(Firefox)

-moz-(火狐)

-o-(Old, pre-WebKit, versions of Opera)

-o-（旧的，pre-WebKit，Opera 的版本）

-ms-(Internet Explorer and Microsoft Edge)

-ms-（Internet Explorer 和 Microsoft Edge）

回答by edgerunner

The ultimate question... Is WebKit supported by IE?

最终问题... IE 支持 WebKit 吗？

Kind of. Check out Chrome Frame, it's a plugin for Internet Explorer that makes it use the Webkit engine. The only quirk is that you have to persuade your visitors to install the plugin.

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

Update

更新

Chrome Frame is no longer maintained or supported…

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

回答by Sotiris

WebKit is a layout engine designed to allow web browsers to render web pages. The WebKit engine provides a set of classes to display web content in windows, and implements browser features such as following links when clicked by the user, managing a back-forward list, and managing a history of pages recently visited.

WebKit was originally created as a fork of KHTML as the layout engine for Apple's Safari; it is portable to many other computing platforms. It is also used in Google's Chrome Browser.

WebKit's WebCore and JavaScriptCore components are available under the GNU Lesser General Public License, and the rest of WebKit is available under a BSD-style license.

WebKit 是一种布局引擎，旨在允许 Web 浏览器呈现网页。WebKit 引擎提供了一组在窗口中显示 Web 内容的类，并实现了浏览器功能，例如在用户单击时跟踪链接、管理后退列表以及管理最近访问过的页面的历史记录。

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

WebKit 的 WebCore 和 JavaScriptCore 组件在 GNU 宽松通用公共许可证下可用，而 WebKit 的其余部分在 BSD 式许可证下可用。

Source Wikipedia

来源维基百科

For further information about layout engines you can look here

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

回答by SLaks

Webkit is an HTML rendering engine used by Chrome and Safari.

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

It supports a number of custom CSS properties that are prefixed by -webkit-.

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

回答by recursive

Webkit is the rendering engine used in the popular browsers Safari and Chrome, as well as others.

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

回答by JKirchartz

Webkit is the html/css rendering engine used in Apple's Safari browser, and in Google's Chrome. css values prefixes with -webkit- are webkit-specific, they're usually CSS3 or other non-standardised features.

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

to answer update 2 w3c is the body that tries to standardize these things, they write the rules, then programmers write their rendering engine to interpret those rules. So basically w3c says DIVs should work "This way" the engine-writer then uses that rule to write their code, any bugs or mis-interpretations of the rules cause the compatibility issues.

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