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

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

更新

从目前的答案来看…WebKit是一个HTML/CSS浏览器渲染引擎Safari/Chrome。IE/Opera/Firefox有这样的引擎吗?使用其中一种引擎的优缺点有什么不同?我可以在Firefox中使用WebKit功能吗?

终极问题……IE支持WebKit吗?

更新2

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

那么,是否存在某种项目或移动到所有浏览器都将使用的标准渲染引擎?HTML5会解决跨浏览器兼容性问题吗?


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

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


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


Webkit是Safari和Chrome使用的web浏览器渲染引擎(在其他浏览器中,但这些是流行的)。

CSS选择器上的-webkit前缀是只有这个引擎才打算处理的属性,非常类似于-moz属性。我们中的许多人都希望这种情况消失,例如-webkit-border-radius将被标准的border-radius所取代,你将不需要为多个浏览器的同一件事制定多个规则。这实际上是“预规范”特性的结果,这些特性的目的是在标准版本出现时不干扰标准版本。

关于你的最新情况:……不,它和IE没有关系,IE至少在9之前使用了一个叫做Trident的不同渲染引擎。


Webkit是苹果Safari浏览器和谷歌的Chrome浏览器中使用的html/css渲染引擎。 css值前缀-webkit-是特定于webkit的,它们通常是CSS3或其他非标准化的特性。

回答更新2 W3c是一个试图标准化这些东西的组织,他们编写规则,然后程序员编写他们的渲染引擎来解释这些规则。所以基本上w3c说div应该“这样工作”,然后引擎编写人员使用该规则来编写他们的代码,任何错误或对规则的错误解释都会导致兼容性问题。


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是一个HTML/CSS浏览器渲染引擎Safari/Chrome。IE/Opera/Firefox有这样的引擎吗?使用其中一种引擎的优缺点有什么不同?我可以在Firefox中使用WebKit功能吗?

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

IE→三叉戟(已停产) Edge→EdgeHTML (Trident的清理分叉)(Edge在2019年切换为Blink) 火狐→壁虎 Opera→Presto(从2013年2月开始不再使用Presto,考虑Opera = Chrome,因此现在是Blink) Safari→WebKit Chrome→Blink (Webkit的一个分支)。

请参阅web浏览器引擎的比较,以获得不同领域的比较列表。

终极问题……IE支持WebKit吗?

不是本地。


除了@KennyTM所说的:

即 引擎:三叉戟 CSS-prefix: - ms 边缘 引擎:EdgeHTML→Blink3 CSS-prefix: - ms 火狐 引擎:壁虎 CSS-prefix: -moz 歌剧 引擎:Presto→Blink1 CSS-prefix: -o (Presto) and -webkit (Blink) Safari WebKit引擎: CSS-prefix: webkit 铬 引擎:WebKit→Blink2 CSS-prefix: webkit

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

2) 2013年4月3日谷歌(Chrome版本28+)宣布他们将使用基于webkit的Blink引擎。

3) 2018年12月6日,微软(Microsoft Edge 79+稳定)宣布他们将使用基于webkit的Blink引擎。


终极问题……IE支持WebKit吗?

种。看看Chrome Frame,这是一个用于Internet Explorer的插件,可以使用Webkit引擎。唯一的问题是你必须说服你的访问者去安装插件。

更新

Chrome框架不再维护或支持…


这个问题已经得到了回答和接受,但如果有人仍然想知道为什么今天的事情有点混乱,你必须读这篇文章:

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.


A common problem I have ran into as a website designer is that alot of people use IE6+. No big deal usually, except in CSS I have to add multiple rendering syntax' to parse each request, per browser. It would be very nice if there was a universal rendering setup for CSS that IE can read as easily as Chrome/FF/Opera and webkit. The problem with IE is that if I do NOT use ALL the proper CSS styles and rendering, than my websites look and work great using every browser except IE. This can make for an unhappy, die-hard IE customer.

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


关于WebEngines(尤其是webKit)及其开发人员的良好文档,你可以在以下地方阅读: WebKit


尽管这是一篇较老的文章,但对于较旧版本的Internet Explorer,还有另一种渲染方法。-webkit作为CSS的供应商前缀,你也可以下载一些JS应用程序,并把它们放在HTML的HEAD底部。

尝试使用Modernizr, HTML5 Shiv和response .js。这些都是惊人的兼容IE的polyfill脚本,使用polyfill,和其他资源,这将有助于更好地呈现HTML5元素在IE9和以下。

要使用这些填充,只需添加HTML布尔逻辑来放置它们,如果浏览器低于所需的IE版本。示例代码如下:

< >头 <!——HEAD Elements——> <script src="path/to/modernizr.js" type="text/javascript"></script> .js <!——[if lt IE 6]> <script src="path/to/HTMLSiv.js" type="text/javascript"> . > < /脚本 <script src="path/to/ response .js" type="text/javascript"> . > < /脚本 <!(endif)——> < / >头


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

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


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

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

-webkit (Chrome, Safari,更新版本的Opera,几乎所有的iOS浏览器(包括iOS的Firefox);基本上,任何基于WebKit的浏览器)

-moz - (Firefox)

-o-(旧的,webkit之前的,Opera版本)

-ms- (Internet Explorer和Microsoft Edge)