首页 文章

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

提问于
浏览
204

最近,我一直看到标签“webkit”的问题 . 这些问题通常倾向于与CSS,jQuery,布局,交叉浏览器兼容性问题等相关的基于Web的问题......

这是什么"webkit"以及它与CSS有什么关系?我也注意到各种网站的源代码中有很多 -webkit-... 属性 . 这两个有关吗?

更新

所以从目前为止的答案...... WebKit是Safari / Chrome的HTML / CSS Web浏览器渲染引擎 . IE / Opera / Firefox是否有这样的引擎?使用其中一个的优点和缺点是什么?我可以在Firefox中使用WebKit功能吗?

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

更新2

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

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

14 回答

  • 80

    更新:显然,WebKit是Safari / Chrome的HTML / CSS Web浏览器渲染引擎 . IE / Opera / Firefox是否有这样的引擎?使用其中一个的优点和缺点是什么?我可以在Firefox中使用WebKit功能吗?

    每个浏览器都由渲染引擎支持,以绘制HTML / CSS网页 .

    • IE→三叉戟(停产)

    • 边缘→EdgeHTML(三叉戟的清理叉)

    • Firefox→Gecko

    • Opera→Presto(自2013年2月起不再使用Presto,现在考虑Opera = Chrome)

    • Safari→WebKit

    • Chrome→Blink(WebKit的一个分支) .

    有关不同区域的比较列表,请参阅Comparison of web browser engines .

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

    不是原生的 .

  • 4

    除了@KennyTM所说的:

    • IE

    • 引擎:Trident

    • CSS-prefix: -ms

    • Edge

    • 引擎:EdgeHTML→Blink 3

    • CSS-prefix: -ms

    • Firefox

    • 引擎:Gecko

    • CSS-prefix: -moz

    • Opera

    • 发动机:Presto→Blink 1

    • CSS-prefix: -o (Presto)和 -webkit (Blink)

    • Safari

    • 引擎:WebKit

    • CSS-prefix: -webkit

    • Chrome

    • 引擎:WebKit→Blink 2

    • CSS-prefix: -webkit

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

    2)2013年4月3日Google(Chrome版本28)announces他们将使用基于WebKit的Blink引擎 .

    3)2018年12月6日微软(2019年初预览版本准备就绪)announces他们将使用基于WebKit的Blink引擎 .

  • 30

    Webkit是Safari和Chrome使用的Web浏览器渲染引擎(除其他外,但这些是流行的) .

    CSS选择器上的 -webkit 前缀是仅此引擎要处理的属性,与 -moz 属性非常相似 . 我们中的许多人希望这一点消失,例如 -webkit-border-radius 将被标准 border-radius 取代,并且对于多个浏览器,您不需要针对同一事物的多个规则 . 这实际上是"pre-specification"功能的结果,旨在不会干扰标准版本 .

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

  • 3

    这已得到回答和接受,但如果有人仍然想知道为什么今天的事情有些混乱,你必须阅读:

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

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

    引用TL的最后一段; DR用途:

    然后谷歌构建了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,像Gecko)Chrome / 0.2.149.27 Safari / 525.13,用户代理字符串完全一塌糊涂,而且几乎没用,而且每个人都假装成其他人,而且混乱比比皆是 .

  • 0

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

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

    更新

    Chrome Frame不再维护或支持...

  • 3

    WebKit是一种布局引擎,旨在允许Web浏览器呈现网页 . WebKit引擎提供了一组类,用于在Windows中显示Web内容,并实现浏览器功能,例如用户单击时的以下链接,管理后退列表以及管理最近访问过的页面的历史记录 . WebKit最初是作为KHTML的一个分支创建的,作为Apple Safari的布局引擎;它可以移植到许多其他计算平台 . 它也用于谷歌的Chrome浏览器 . WebKit的WebCore和JavaScriptCore组件在GNU Lesser通用公共许可证下可用,其余的WebKit在BSD风格的许可证下可用 .

    来源Wikipedia

    有关布局引擎的更多信息,您可以查看here

  • 6

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

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

  • 4

    -webkit- 只是Chrome,Safari,Opera和iOS浏览器适合的群组 . 它们都有一个共同的祖先,因此它们的能力/限制(当涉及到运行CSS和Javascript时)通常仅限于该组 .

    开发人员将放置 -webkit- 后跟一些代码,这意味着代码只能在Chrome,Safari,Opera和iOS浏览器上运行 . 这是一个完整的清单:

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

    -moz- (火狐)

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

    -ms- (Internet Explorer和Microsoft Edge)

  • 5

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

  • 3

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

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

  • 2

    我作为网站设计师遇到的一个常见问题是很多人使用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浏览器版本中,并不总能保证积极的结果,但在大多数情况下,这种方法对我和其他许多人来说都很好 .

  • 127

    尽管这是一篇较旧的帖子,但还有另一种方法可以渲染旧版本的Internet Explorer . -webkit作为CSS Vendor Prefix时,您还可以下载一些JS应用程序并将它们放在HTML的HEAD底部 .

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

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

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

    关于 WebEngines 特别是 webKit 及其开发人员的详细文档,您可以阅读:WebKit

  • 30

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

    IE→Trident(停产)Edge→EdgeHTML(Trident清理叉)Firefox→Gecko Opera→Presto(自2013年2月起不再使用Presto,现在考虑Opera = Chrome)Safari→WebKit Chrome→Blink(WebKit的一个分支) .

相关问题