HTML5学堂-码匠 HTML5学堂

您当前位于:项目开发经验积累 ——> 主流浏览器的内核以及内核前缀是什么?

主流浏览器的内核以及内核前缀是什么?

2015/08/26 15:59:44 | 作者:HTML5学堂(码匠) | 分类:项目开发经验积累 | 关键词:浏览器,内核,内核前缀,webkit

浏览器内核、内核前缀 强制360浏览器以webkit内核渲染

HTML5学堂:本文章主要讲解浏览器的内核以及内核前缀,并且针对360浏览器的内核、强制360浏览器以webkit内核方式渲染等知识进行一定的介绍。

刘国利 - 独行冰海:本篇文章更新时间为2015年08月26日。之所以声明这个,主要是源于一件事情,2013年,在百度知道里回答过一个animation不能让CSS3动画播放后停止在最后的状态。这个月中旬,收到了一个评论,有人把“animation的新增属性 animation-fill-mode: forwards;”搬了出来,说能够实现(隔了两年了……还在讨论这个,自己只想呵呵)。自己想说的是,行业在变,文章写出来过不了多久就会过时,hack就是一个典型,紧跟行业的变化去更新自己的知识很重要,评论、点赞、吐槽谁都会,还不如把自己的知识拿出来和大家分享分享。这篇文章最后,再解释一下animation-fill-mode吧。

浏览器内核以及内核前缀

什么是内核呢?

浏览器最核心的部分是“Rendering Engine”,可译为“渲染引擎”,不过习惯将之称为“浏览器内核”。

为何要了解内核

不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是前端工程师需要了解内核的原因。前端工程师在代码中通过一些内核前缀为相应浏览器增加某些功能。换句话说,内核前缀标志着某种类的浏览器,使用内核前缀书写的代码只能够应用于相应浏览器。

常见浏览器以及浏览器内核、内核前缀

1、IE浏览器 - Trident - ms

2、谷歌、苹果浏览器 - Webkit,最新谷歌为Blink内核 - webkit

3、欧朋浏览器 - Presto,最新版本也已经调整为了webkit内核 - o

4、火狐浏览器 - Gecko - moz

详见下图:

浏览器内核,浏览器内核前缀

360浏览器

360浏览器是一款双内核的浏览器,极速模式使用的是Webkit内核,Webkit内核是全球最快速的浏览器内核,同时支持了诸多的网页新标准,但由于Webkit内核较新,国内一些网站尚未较好地支持此内核。

兼容模式使用的是IE浏览器所使用的 Trident 内核,是国内网页制作时主要兼容的浏览器内核,兼容性问题较少。IE9/IE10模式使用的是IE9/IE10浏览器所使用的新内核,加入了硬件加速、全新的脚本渲染引擎,更标准的HTML5及CSS3支持。

让360浏览器强制以webkit内核渲染的代码:在head中添加如下代码:

<meta name="renderer" content="webkit">

animation-fill-mode的支持程度

1、移动端安卓2.3以及以前的系统,不支持'animation-fill-mode'属性

2、在谷歌浏览器中,如果采用steps(x, start)的设置方式,animation-fill-mode backwards会出现问题

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS