浏览器内核、内核前缀 强制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学堂