小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
浏览器引擎前缀
前言
之前笔试的时候有做到一题选择对应浏览器前缀的问题。虽然开发的时候有用到过CSS的浏览器前缀，但是都是全部都加上，没有注意过前缀和浏览器的对应关系。这篇文章主要是做一个简单的介绍。
一、什么是浏览器引擎前缀？
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
这个想必大家都不陌生，对于一些比较新的CSS属性，经常会添加这样的带前缀的属性来做兼容性处理。 这个就是浏览器引擎前缀的一种。
MDN上关于浏览器引擎前缀的解释
浏览器厂商们有时会给实验性的或者非标准的 CSS 属性和 JavaScript API 添加前缀，这样开发者就可以用这些新的特性进行试验，同时（理论上）防止他们的试验代码被依赖，从而在标准化过程中破坏 web 开发者的代码。开发者应该等到浏览器行为标准化之后再使用未加前缀的属性。
浏览器厂商们正在努力停止使用前缀来表示实验性质的代码的行为。Web开发者一直在生产环境的网站上使用这些实验性代码，这使得浏览器厂商更难保证浏览器兼容性和处理新特性；这也伤害了更小众的浏览器，它们被迫添加其他浏览器前缀以加载热门网站。
现在的趋势是将实验性功能添加在需要用户自行设置偏好或标记（flag）的地方，同时编写一个更小规模的规范，以更快达到稳定状态。
二、为什么需要浏览器引擎前缀(Vendor Prefix)？
Vendor prefix—浏览器引擎前缀，是一些放在CSS属性前的小字符串，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。一种浏览器引擎里一般不实现其它引擎前缀标识的CSS属性，但由于以WebKit为引擎的移动浏览器相当流行，火狐等浏览器在其移动版里也实现了部分WebKit引擎前缀的CSS属性。
三、浏览器引擎前缀分类
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
特别注意：把不带前缀的版本放到最后一行：
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame;
四、浏览器引擎对应关系
CSS 前缀
| 浏览器引擎CSS 前缀 | 浏览器 |
|---|---|
| -webkit- | 谷歌，Safari，新版Opera浏览器，以及几乎所有iOS系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于WebKit 内核的浏览器 |
| -moz- | 火狐浏览器 |
| -o- | 旧版Opera浏览器 |
| -ms- | IE浏览器 和 Edge浏览器 |
API 前缀
- 接口前缀 | 接口前缀 | 浏览器 | | --- | --- | | WebKit | 谷歌，Safari，新版Opera浏览器，以及几乎所有iOS系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于WebKit 内核的浏览器 | | Moz | 火狐浏览器 | | O | 旧版Opera浏览器 | | MS | IE浏览器 和 Edge浏览器 |
- 属性和方法前缀 | 属性和方法前缀 | 浏览器 | | --- | --- | | webkit | 谷歌，Safari，新版Opera浏览器，以及几乎所有iOS系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于WebKit 内核的浏览器 | | moz | 火狐浏览器 | | o | 旧版Opera浏览器 | | ms | IE浏览器 和 Edge浏览器 |
可以发现：
前缀和浏览器的对应关系都是一样的。只是不同类型的前缀写法不一样。
需要使用 -x- 的前缀修饰CSS类名
需要使用大写的前缀修饰接口名
需要使用小写的前缀修饰属性或者方法
五、需要使用浏览器引擎前缀的CSS3属性
- @keyframes
- 移动和变换属性(transition-property, transition-duration, transition-timing-function, transition-delay)
- 动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay)
- border-radius
- box-shadow
- backface-visibility
- column属性
- flex属性
- grid属性
- perspective属性
- ...(更多的)
完整的列表不只这些，而且还会增加。
这些属性不是一定的，随着属性的稳定性或者成熟度提高，也可能可以不用添加浏览器引擎前缀（比如 border-radius）
六、浏览器-内核-前缀 速记
| 浏览器 | 内核 | 前缀 |
|---|---|---|
| Chrome | WebKit内核 | -webkit- |
| Safari | WebKit内核 | -webkit- |
| Firefox | Gecko内核 | -moz- |
| IE | Trident内核 | -ms- |
| 旧版Opera | Presto内核 | -o- |
| 新版Opera | Webkit内核，Blink内核 | -webkit- |
网络上关于Opera的内核有比较多中说法，这个建议大家查证。
技术持续成长中，若文章中有错误欢迎交流指正！
参考文章：
