当前位置： 文江博客 话题详情

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

发布于 2024-09-14 12:45:24 字数 500 浏览 6 评论 0 原文

最近，我一直看到带有“webkit”标签的问题。此类问题通常往往是与 CSS、jQuery、布局、跨浏览器兼容性问题等相关的基于 Web 的问题……

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

更新

因此，从到目前为止的答案来看... WebKit 是 Safari/Chrome 的 HTML/CSS Web 浏览器渲染引擎。 IE/Opera/Firefox 是否有这样的引擎？使用其中一种引擎有何区别、优缺点？例如，我可以在 Firefox 中使用 WebKit 功能吗？

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

更新 2

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

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

原文

More recently, I have been seeing questions with the tag "webkit". Such questions usually tend to be web-based questions relating to CSS, jQuery, layouts, cross-browers compatibility issues, etc...

So what is this "webkit" and how does it relate to CSS? I have also noticed a lot of -webkit-... properties in the source code for various websites. Are these two related?

Update

So from the answers so far... WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome. Are there such engines for IE/Opera/Firefox and what are the differences, pros and cons of using one over the other? Can I use WebKit features in Firefox for example?

The ultimate question... Is WebKit supported by IE?

Update 2

All of the major browsers use different rendering engines. I guess this is a big reason why there are so many cross-browser compatibility issues!

So, is there some kind of project or movement to a standard rendering engine that ALL browsers will use? Will HTML5 bring an end to the cross-browser compatibility issues?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（14）

追我者格杀勿论 2024-09-21 12:45:24

更新：显然，WebKit 是 Safari/Chrome 的 HTML/CSS Web 浏览器渲染引擎。 IE/Opera/Firefox 是否有这样的引擎？使用其中一种引擎有何区别、优缺点？例如，我可以在 Firefox 中使用 WebKit 功能吗？

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

  • IE → Trident（已停产）
  • Edge → EdgeHTML（Trident 的清理分叉）（Edge 切换到 Blink（2019 年））
  • Firefox → Gecko
  • Opera → Presto（自 2013 年 2 月起不再使用 Presto，考虑 Opera = Chrome，因此 Blink)
  • Safari → WebKit
  • Chrome → Blink （Webkit）。

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

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

不是原生的。

Update: So apparently, WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome. Are there such engines for IE/Opera/Firefox and what are the differences, pros and cons of using one over the other? Can I use WebKit features in Firefox for example?

Every browser is backed by a rendering engine to draw the HTML/CSS web page.

  • IE → Trident (discontinued)
  • Edge → EdgeHTML (clean-up fork of Trident) (Edge switched to Blink in 2019)
  • Firefox → Gecko
  • Opera → Presto (no longer uses Presto since Feb 2013, consider Opera = Chrome, therefore Blink nowadays)
  • Safari → WebKit
  • Chrome → Blink (a fork of Webkit).

See Comparison of web browser engines for a list of comparisons in different areas.

The ultimate question... is WebKit supported by IE?

Not natively.

回复 原文
沉鱼一梦 2024-09-21 12:45:24

除了@KennyTM 说：

  • IE
  • 边缘
  • <火狐浏览器
    • 引擎：Gecko
    • CSS 前缀：-moz
  • 歌剧
    • 引擎：Presto → 眨眼1
    • CSS 前缀：-o (Presto) 和 -webkit (Blink)
  • Safari
    • 引擎：WebKit
    • CSS 前缀：-webkit
  • <强>铬

< support>1) 2013 年 2 月 12 日 Opera（版本 15+）宣布他们从自己的引擎 Presto 转向名为 眨眼。

2) 2013 年 4 月 3 日 Google（Chrome 版本 28+）宣布他们将使用基于 WebKit 的眨眼引擎。

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

Addition to what @KennyTM said:

  • IE
  • Edge
  • Firefox
    • Engine: Gecko
    • CSS-prefix: -moz
  • Opera
    • Engine: Presto → Blink1
    • CSS-prefix: -o (Presto) and -webkit (Blink)
  • Safari
    • Engine: WebKit
    • CSS-prefix: -webkit
  • Chrome

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.

回复 原文
甜心小果奶 2024-09-21 12:45:24

Webkit 是 Safari 和 Chrome（以及其他浏览器，但这些都是流行的）使用的 Web 浏览器渲染引擎。

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

对于您的更新：...不，它实际上与 IE 无关，IE 至少在 9 之前使用不同的渲染引擎，称为 三叉戟。

Webkit is a web browser rendering engine used by Safari and Chrome (among others, but these are the popular ones).

The -webkit prefix on CSS selectors are properties that only this engine is intended to process, very similar to -moz properties. Many of us are hoping this goes away, for example -webkit-border-radius will be replaced by the standard border-radius and you won't need multiple rules for the same thing for multiple browsers. This is really the result of "pre-specification" features that are intended to not interfere with the standard version when it comes about.

For your update:...no it's not related to IE really, IE at least before 9 uses a different rendering engine called Trident.

回复 原文
孤君无依 2024-09-21 12:45: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称自己为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，用户代理字符串一团糟，几乎没用，每个人都假装是其他人，并且充满了混乱。

This has been answered and accepted, but if someone is still wondering why are things a bit messed up today, you'll have to read this:

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

It gives a good idea of how gecko, webkit and other major rendering engines evolved and what led to the current state of messed up user-agent strings.

Quoting the last paragraph for TL;DR purposes:

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.

回复 原文
月棠 2024-09-21 12:45:24

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

-webkit- is simply a group that Chrome, Safari, Opera and iOS browsers fit into. They all have a common ancestor, so often their capabilities/limitations (when it comes to running CSS and Javascript) are confined to the group.

A developer will place -webkit- followed by some code, meaning that the code will only run on Chrome, Safari, Opera and iOS browsers. Here is a complete list:

-webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)

-moz- (Firefox)

-o- (Old, pre-WebKit, versions of Opera)

-ms- (Internet Explorer and Microsoft Edge)

回复 原文
治碍 2024-09-21 12:45:24

终极问题... IE 支持 WebKit 吗？

有点儿。查看 Chrome 内嵌框架，它是一个 Internet Explorer 插件，使其使用Webkit引擎。唯一的怪癖是您必须说服访问者安装该插件。

更新

Chrome 浏览器内嵌框架不再受到维护或支持...

The ultimate question... Is WebKit supported by IE?

Kind of. Check out Chrome Frame, it's a plugin for Internet Explorer that makes it use the Webkit engine. The only quirk is that you have to persuade your visitors to install the plugin.

Update

Chrome Frame is no longer maintained or supported…

回复 原文
束缚ｍ 2024-09-21 12:45:24

WebKit 是一个布局引擎，旨在
允许网络浏览器渲染网络
页。 WebKit 引擎提供了
显示网页内容的类集
在windows中，并实现浏览器
功能，例如以下链接
由用户点击，管理
前后列表，并管理
最近访问的页面的历史记录。

WebKit 最初是作为
KHTML 的分支作为布局引擎
苹果的 Safari 浏览器；它对于许多人来说都是便携的
其他计算平台。这也是
用于 Google 的 Chrome 浏览器。

WebKit的WebCore和JavaScriptCore
组件可在 GNU 下使用
较小的通用公共许可证，以及
WebKit 的其余部分可在
BSD 风格的许可证。

来源 Wikipedia

有关布局引擎的更多信息，您可以查看 此处

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.

Source Wikipedia

For further information about layout engines you can look here

回复 原文
过潦 2024-09-21 12:45:24

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

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

Webkit is an HTML rendering engine used by Chrome and Safari.

It supports a number of custom CSS properties that are prefixed by -webkit-.

回复 原文
吃素的狼 2024-09-21 12:45:24

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

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

Webkit is the html/css rendering engine used in Apple's Safari browser, and in Google's Chrome.
css values prefixes with -webkit- are webkit-specific, they're usually CSS3 or other non-standardised features.

to answer update 2
w3c is the body that tries to standardize these things, they write the rules, then programmers write their rendering engine to interpret those rules. So basically w3c says DIVs should work "This way" the engine-writer then uses that rule to write their code, any bugs or mis-interpretations of the rules cause the compatibility issues.

回复 原文
一瞬间的火花 2024-09-21 12:45:24

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

Webkit is the rendering engine used in the popular browsers Safari and Chrome, as well as others.

回复 原文
不爱素颜 2024-09-21 12:45: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 浏览器版本都能获得积极的结果，但在大多数情况下，这种方法对我和许多其他人来说效果很好。

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.

Example is this: Let us say I need a 1px, grey border with a border-radius of 10%. For Chrome and others, I use the webkit property. Now, for IE, I have to add seperate CSS styles using the simple old CSS values of "border: 1px solid #E5E5E5" and "border-radius: 10%". A positive outcome is not always guaranteed over all IE browser versions, but for the most part this method works fine for me and many others.

回复 原文
趁年轻赶紧闹 2024-09-21 12:45:24

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

尝试使用 Modernizr、HTML5 Shiv 和 Respond.js。这些是令人惊叹的 IE 兼容的 polyfill 脚本，它们使用 polyfill，以及其他资源，有助于更好地在 IE9 及以下版本中渲染 HTML5 元素。

要使用这些填充，如果浏览器低于所需的 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>

Even though this is an older post, there is also another method to rendering for older versions of Internet Explorer. -webkit while being a CSS Vendor Prefix, you can also download a few JS applications and place them in the bottom of the HTML's HEAD.

Try using Modernizr, HTML5 Shiv and Respond.js. These are amazing IE compatible polyfill scripts that use polyfills, and other resources which will help better render HTML5 elements in IE9 and Below.

To use these polyfills, simply add HTML boolean logic to place them, IF the browser is less than the desire IE version. Example code is:

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

回复 原文
七度光 2024-09-21 12:45:24

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

IE → 三叉戟（已停产）
Edge → EdgeHTML（Trident 的清理分支）
火狐 → 壁虎
Opera → Presto（自 2013 年 2 月起不再使用 Presto，现在考虑 Opera = Chrome）
Safari → WebKit
Chrome → Blink（WebKit 的一个分支）。

Webkit is the rendering engine used in the popular browsers Safari and Chrome, as well as others
Every browser is backed by a rendering engine to draw the HTML/CSS web page.

IE → Trident (discontinued)
Edge → EdgeHTML (clean-up fork of Trident)
Firefox → Gecko
Opera → Presto (no longer uses Presto since Feb 2013, consider Opera = Chrome nowadays)
Safari → WebKit
Chrome → Blink (a fork of WebKit).

回复 原文
悲喜皆因你 2024-09-21 12:45:24

关于 WebEngines 特别是 webKit 及其开发人员的很好的文档，您可以阅读：
WebKit

A good documentation about WebEngines especially webKit and its developers you can read at:
WebKit

回复 原文
~没有更多了~

关于作者

国粹

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

苦中寻乐

文章 0 评论 0

lueluelue

文章 0 评论 0

嗼ふ静

文章 0 评论 0

王权女流氓

文章 0 评论 0

与花如笺

文章 0 评论 0

残酷

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文