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

css CSS

神无

2020-03-24

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

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

更新资料

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

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

更新2

所有主要的浏览器都使用不同的渲染引擎。我猜这是跨浏览器兼容性问题如此之多的重要原因!

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

第3314篇《什么是WebKit?它与CSS有什么关系?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

14个回答
理查德阳光 2020.03.24

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

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

老丝 2020.03.24

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

猴子Itachi 2020.03.24

即使这是一个较旧的文章,也存在另一种方法来渲染较旧版本的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>

梅西门 2020.03.24

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

村村 2020.03.24

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

飞云达蒙 2020.03.24

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

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

WebKit的WebCore和JavaScriptCore组件可在GNU通用通用公共许可证下获得,其余WebKit可在BSD样式的许可证下获得。

来源维基百科

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

Mandy村村 2020.03.24

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

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

猴子村村 2020.03.24

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

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

十三神乐 2020.03.24

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

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

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

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

不是本地的。

西里神乐 2020.03.24

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

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

更新资料

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

飞云 2020.03.24

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

阿飞 2020.03.24

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

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

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

老丝神奇 2020.03.24

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

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

西门 2020.03.24

@KennyTM所说的内容之外

  • IE浏览器
  • 边缘
  • 火狐浏览器
    • 引擎:壁虎
    • CSS前缀: -moz
  • 歌剧
    • 引擎:Presto闪烁1
    • CSS前缀:-o(Presto)和-webkit(Blink)
  • 苹果浏览器
    • 引擎:WebKit
    • CSS前缀: -webkit

1) On February 12 2013 Opera (version 15+) announces they moving away from their own engine Presto to WebKit named Blink.

2) On April 3 2013 Google (Chrome version 28+) announces they are going to use the WebKit-based Blink engine.

3) On December 6 2018 Microsoft (Microsoft Edge 79+ stable) announces they are going to use the WebKit-based Blink engine.

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android