最近,我看到一些带有“webkit”标签的问题。这类问题通常是基于web的问题,与CSS、jQuery、布局、跨浏览器兼容性问题等有关…
那么什么是“webkit”,它与CSS有什么关系呢?我还注意到很多-webkit-…属性在各种网站的源代码。这两者有关系吗?
更新
从目前的答案来看…WebKit是一个HTML/CSS浏览器渲染引擎Safari/Chrome。IE/Opera/Firefox有这样的引擎吗?使用其中一种引擎的优缺点有什么不同?我可以在Firefox中使用WebKit功能吗?
终极问题……IE支持WebKit吗?
更新2
所有主流浏览器都使用不同的呈现引擎。我想这就是为什么有这么多跨浏览器兼容性问题的一个重要原因!
那么,是否存在某种项目或移动到所有浏览器都将使用的标准渲染引擎?HTML5会解决跨浏览器兼容性问题吗?
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浏览器版本上都能得到积极的结果,但在大多数情况下,这种方法对我和许多其他人来说都很有效。
除了@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引擎。
更新:所以很明显,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吗?
不是本地。
尽管这是一篇较老的文章,但对于较旧版本的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)——>
< / >头