代码之家 › 专栏 › 技术社区 › Hristo

什么是WebKit,它与CSS有什么关系?

rendering-engine cross-browser webkit css

221

Hristo · 技术社区 · 14 年前

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

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

更新

最终的问题。。。IE是否支持WebKit?

更新2

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

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

14 回复 | 直到 7 年前

199

edgerunner 5 年前

更新:显然,WebKit是一个用于Safari/Chrome的HTML/CSS web浏览器呈现引擎。IE/Opera/Firefox有这样的引擎吗?使用一个引擎和使用另一个引擎有什么区别,利弊?例如,我可以在Firefox中使用WebKit功能吗?

~~IE公司→ Trident~~ (已停产)
边缘 ~~EdgeHTML (三叉戟清理叉)~~ Blink (2019年)
Gecko
~~歌剧院→ Presto~~ (自2013年2月起不再使用Presto,因此请考虑Opera=Chrome (现在)
游猎→ WebKit
眨眼 (叉子) Webkit ).

看到了吗 Comparison of web browser engines 不同领域的比较列表。

不是天生的。

135

jerone 5 年前

除了什么 @KennyTM 说:

IE公司
- 发动机: Trident
- CSS前缀: -ms
边缘
- ~~EdgeHTML~~ Blink ^三
- CSS前缀: -微软
火狐
- 发动机: Gecko
- CSS前缀: -moz
歌剧院
- ~~Presto~~
- CSS前缀: -o (普雷斯托)和 -webkit
游猎
- 发动机: WebKit
- CSS前缀: -网络工具包
铬
- 发动机: ~~网络工具包~~ 眨眼 ²
- CSS前缀:

¹⁾ announces 他们从自己的引擎Presto搬到了名为 .

²⁾ announces 他们将使用基于WebKit的眨眼引擎。

³⁾ announces 他们将使用基于WebKit的眨眼引擎。

shivisuper Nick Craver 9 年前

-webkit CSS选择器上的前缀是只有这台发动机是用来加工的,非常类似于 -moz 属性。例如,我们中的许多人都希望这种情况消失 -webkit-border-radius border-radius 相同的

对于您的更新: …不,它与IE无关,IE至少在9使用不同的渲染引擎之前称为 Trident .

CodeExpress 8 年前

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

它给出了gecko、webkit和其他主要渲染引擎是如何演变的,以及是什么导致了当前混乱的用户代理字符串的状态。

引用TL的最后一段;灾难恢复目的:

然后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 ,而用户代理字符串是一团乱麻,几乎毫无用处,每个人都假装是其他人,混乱无处不在。

Sunil Garg 6 年前

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

开发商将 -网络工具包-

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

-moz-

-o- (旧版,前WebKit,Opera版本)

-ms- (Internet Explorer和Microsoft Edge)

edgerunner 6 年前

最终的问题。。。IE是否支持WebKit?

Chrome Frame ,它是一个用于Internet Explorer的插件,使其使用Webkit引擎。唯一的怪癖是你必须说服你的访问者安装插件。

更新

不再维护或支持镀铬框架

Sotiris Adrian J. Moreno 14 年前

WebKit是一个设计用于允许web浏览器呈现web 显示web内容的类集功能,如以下链接时由用户单击,管理向后转发列表,并管理

WebKit最初是作为苹果野生动物园;它便于许多人携带用于谷歌的Chrome浏览器。

组件在GNU下可用较低的通用公共许可证,以及 BSD样式许可证。

来源 Wikipedia

有关布局引擎的更多信息,请参见 here

SLaks 14 年前

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

它支持许多以 -webkit-

JKirchartz 14 年前

Webkit是苹果Safari浏览器和谷歌Chrome浏览器中使用的html/css呈现引擎。

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

recursive 14 年前

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

AJADMIN.COM 11 年前

作为一名网站设计师,我遇到的一个常见问题是,很多人使用IE6+。通常没什么大不了的,除了在CSS中,我必须添加多个呈现语法'来解析每个请求,每个浏览器。如果有一个通用的CSS呈现设置,IE可以像Chrome/FF/Opera和webkit一样轻松地阅读,那就太好了。IE的问题是,如果我没有使用所有正确的CSS样式和渲染,我的网站会在使用除IE以外的所有浏览器时都看起来和工作得很好。这可能会让一个不开心的、死心塌地的IE客户感到不快。

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

CoyoteCMS 9 年前

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

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

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

Nabeel khan 6 年前

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

IE三叉戟(已停产) 边缘(三叉戟清理叉) Opera Presto(从2013年2月起不再使用Presto,现在考虑Opera=Chrome) Safari网络工具包 Chrome Blink(WebKit的分支)。

hamidfzm AlexLordThorsen 11 年前

一份关于 WebEngines 尤其地 webKit 您可以在以下网址阅读: WebKit