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

277

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

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

更新资料

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

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

更新2

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

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

css  webkit  cross-browser  rendering-engine 
— 里斯托
source
1
您的最后一个问题实际上是“可以告诉IE渲染尚未被编程渲染的东西吗？”，答案是否定的
— Gareth，2010年
firefox的渲染引擎称为壁虎。即使用自己的专有引擎。
— troelskn
@加雷斯...谢谢。这正是我希望不听到的内容：)在这种情况下，我希望IE能够很快开始兼容...并且人们会停止使用IE6！
— 赫里斯特
6
请查看css3pie.com，了解通过CSS添加到IE的一些webkit功能。
— Kenoyer130
WebKit是有史以来最糟糕的HTML呈现引擎，没有障碍。用NWA来表示，还不错，意味着不好。
— Dagg Nabbit

Answers:

168

更新：显然，WebKit是Safari / Chrome的HTML / CSS Web浏览器呈现引擎。是否有针对IE / Opera / Firefox的引擎，将它们相互使用有什么优缺点？例如，我可以在Firefox中使用WebKit功能吗？

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

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

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

不是本地的。

— 肯尼
source
..感谢您解决我的更新。因此，如果IE不支持WebKit，并且我知道它不支持这些-moz-属性...如何使IE接受CSS3样式？
— 赫里斯特
@Hristo：取决于您需要的样式。
— kennytm 2010年
我没有什么特别的主意...我只知道IE在跨浏览器兼容性方面很糟糕，我想知道WebKit是否是解决此问题的一种方法。
— 赫里斯特
3
应该更新。Chrome开发人员使用了分叉的Webkit，而Opera不再使用presto了
— Richard
1
EdgeHTML现在也已停产。
— DreamTeK '19
115

@KennyTM所说的内容之外：

  • IE浏览器
  • 边缘
  • 火狐浏览器
    • 引擎：壁虎
    • CSS前缀： -moz
  • 歌剧
    • 引擎：Presto → 闪烁1
    • CSS前缀：-o（Presto）和-webkit（Blink）
  • 苹果浏览器
    • 引擎：WebKit
    • CSS前缀： -webkit
  • 铬

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

2） 2013年4月3日，谷歌（Chrome 28+）宣布他们将使用基于WebKit的Blink引擎。

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

— 杰罗恩
source
2
..那是很棒的信息！那么不同的渲染引擎会忽略这些前缀吗？即会火狐忽略-msie，-o，-webkit，将Webkit的忽略-moz，-o，-msie，等等...？
— 赫里斯特
1
@Hristo是的，它不承认任何这些是有效的CSS，因此它会忽略他们
— JKirchartz
1
JKirchartz是正确的。其他浏览器将彼此忽略css-prefix。
— jerone
2
Opera转移到的WebKit是Chromium变体，它本身已变成Blink。
— BoltClock
41

Webkit是Safari和Chrome使用的Web浏览器呈现引擎（还有其他流行的引擎）。

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

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

— 尼克Craver
source
2
可以-webkit-像Firefox一样使用CSS3功能的高级呈现功能吗？
— 赫里斯特
1
不，Firefox使用的渲染引擎称为Gecko
— Gareth，2010年
2
@Hristo-Firefox使用了一些相似的属性，但是被称为-moz（对于mozilla），它-webkit在解析样式时会忽略角色：）
— Nick Craver
35

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

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调用了self 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，并且用户代理字符串完全是一团糟，并且几乎毫无用处，每个人都假装成其他人，到处都是混乱。

— CodeExpress
source
访问上面的链接，其内容翔实和最终的高潮很有趣。
— 阿伦·普拉萨德
10

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

— 泰霍里兹
source
9

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

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

更新资料

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

— 边缘跑者
source
2
不再支持Chrome浏览器内嵌框架。
— Eric Willigers
是。充其量这是一个权宜之计。8年过去了，现在是IE让路给适当的兼容浏览器的时候了。
— edgerunner
微软希望IE消失。Windows 10附带提供了此文件，以实现向后兼容。
— RJ Dunnill '19
8

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

WebKit最初是作为KHTML的分支而创建的，作为Apple Safari的布局引擎。它可移植到许多其他计算平台。它也用在Google的Chrome浏览器中。

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

来源维基百科

有关布局引擎的更多信息，请点击此处

— 索蒂里斯
source
7

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

它支持许多以开头的自定义CSS属性-webkit-。

— ak
source
5

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

— 递归的
source
5

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

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

— 吉尔查兹
source
4

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

— AJADMIN.COM
source
3

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

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

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

<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>
展开摘要

— 土狼CMS
source
1

有关WebEngines特别是webKit其开发人员的优秀文档，您可以在以下网站阅读： WebKit

— Hamidfzm
source
1

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

IE→Trident（已停产）Edge→EdgeHTML（Trident的清理分支）Firefox→Gecko Opera→Presto（自2013年2月起不再使用Presto，如今考虑使用Opera = Chrome）Safari→WebKit Chrome→Blink（WebKit的分支） 。

— 纳比尔·汗
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.