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


What is WebKit and how is it related to CSS?

最近，我看到了带有" webkit"标签的问题。这些问题通常是与CSS，jQuery，布局，跨浏览器兼容性问题等有关的基于Web的问题。

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

更新资料

因此，从到目前为止的答案来看... WebKit是Safari / Chrome的HTML / CSS Web浏览器呈现引擎。是否有针对IE / Opera / Firefox的引擎，将它们相互使用有什么优缺点？例如，我可以在Firefox中使用WebKit功能吗？

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

更新2

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

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

相关讨论

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?

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

  • IE Trident (已停产)
  • Edge→ EdgeHTML(Trident的清理叉)(Edge在2019年切换为Blink)
  • Firefox壁虎
  • Opera Presto (自2013年2月起不再使用Presto，请考虑Opera = Chrome，因此如今会闪烁)
  • Safari WebKit
  • Chrome Blink(Webkit的分支)。

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

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

不是本地的。

相关讨论

@KennyTM所说的内容之外：

  • IE浏览器

    • 引擎：三叉戟
    • CSS前缀：-ms
  • 边缘

    • 引擎： EdgeHTML →Blink3
    • CSS前缀：-ms
  • 火狐浏览器

    • 引擎：壁虎
    • CSS前缀：-moz
  • 歌剧

    • 引擎： Presto →闪烁1
    • CSS前缀：-o(Presto)和-webkit(闪烁)
  • 苹果浏览器

    • 引擎：WebKit
    • CSS前缀：-webkit
  • 铬

    • 引擎： WebKit →Blink2
    • CSS前缀：-webkit

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

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

3)2018年12月6日，Microsoft(2019年初准备好预览版)宣布他们将使用基于WebKit的Blink引擎。

相关讨论

Webkit是Safari和Chrome使用的网络浏览器渲染引擎(还有其他流行的引擎)。

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

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

相关讨论

这已经得到了回答和接受，但是如果有人仍然想知道为什么今天的事情有些混乱，那么您必须阅读以下内容：

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

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

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

相关讨论

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

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

更新资料

不再维护或不支持Chrome框架…

相关讨论

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

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是Chrome和Safari使用的HTML呈现引擎。

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

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

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

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

作为网站设计师，我遇到的一个常见问题是很多人使用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浏览器版本上都获得肯定的结果，但是在大多数情况下，此方法对我和其他许多人都有效。

即使这是一个较旧的文章，也存在另一种方法来渲染较旧版本的Internet Explorer。 -webkit作为CSS Vendor Prefix时，您还可以下载一些JS应用程序并将它们放在HTML HEAD的底部。

尝试使用Modernizr，HTML5 Shiv和Respond.js。这些是惊人的与IE兼容的polyfill脚本，它们使用polyfill和其他资源来帮助更好地呈现IE9及以下的HTML5元素。

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

1
2
3
4
5
6
7
8
9
10
<head>
<!-- HEAD Elements -->  
<script src="path/to/modernizr.js" type="text/javascript">
<!--[if lt IE 6]>
  <script src="path/to/HTMLSiv.js" type="text/javascript">
 
  <script src="path/to/respond.js" type="text/javascript">
 
<![endif]-->
</head>

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

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

有关WebEngines特别是webKit及其开发人员的优质文档，您可以在以下位置阅读：
WebKit