浏览器引擎前缀

浏览器厂商们有时会给实验性的或者非标准的CSS属性和JavaScript API添加前缀,这样开发者就可以用这些新的特性进行试验(理论上地)防止他们的实验被依赖导致在标准化生产过程中破坏web开发人员的代码。开发者们应该等到浏览器行为标准化之后再包含未加前缀的属性。

浏览器厂商们正在努力停止使用前缀来表示实验性质的代码的行为。Web开发者一直在生产网站上使用这些实验性代码,这使得浏览器厂商更难保证浏览器兼容性和处理新特性,这也对那些被迫添加其他浏览器前缀以加载热门网站的小型浏览器有害。

现在,他们更倾向于在用户控制偏好之后增加一些实验特性,更小的变动以更快的达到稳定的状态。

CSS 前缀

主流浏览器引擎前缀:

  • -webkit- (谷歌, Safari, 新版Opera浏览器, 以及几乎所有iOS系统中的浏览器(包括iOS 系统中的火狐浏览器); 简单的说,所有基于WebKit 内核的浏览器)
  • -moz- (火狐浏览器)
  • -o- (旧版Opera浏览器)
  • -ms- (IE浏览器 和 Edge浏览器)

示例:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease; 

API 前缀

过去,浏览器引擎使用前缀修饰实验性质的APIs。如果整个接口都是实验性的,前缀修饰的就是接口名(不包括属性或者方法)。如果将一个实验性的接口或者方法添加到一个标准化的接口中,这个新增的接口或者方法被前缀修饰。 

接口前缀

需要使用大写的前缀修饰接口名

  • WebKit (谷歌, Safari, 新版Opera浏览器, 以及几乎所有iOS系统中的浏览器(包括iOS 系统中的火狐浏览器); 简单的说,所有基于WebKit 内核的浏览器)
  • Moz (火狐浏览器)
  • O (旧版Opera浏览器)
  • MS (IE浏览器 和 Edge浏览器)

属性和方法前缀

需要使用小写的前缀修饰属性或者方法

  • webkit (谷歌, Safari, 新版Opera浏览器, 以及几乎所有iOS系统中的浏览器(包括iOS 系统中的火狐浏览器); 简单的说,所有基于WebKit 内核的浏览器)
  • moz (火狐浏览器)
  • o (旧版Opera浏览器等
  • ms (IE浏览器 和 Edge浏览器)

示例:

var requestAnimationFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame || 
                            window.oRequestAnimationFrame || 
                            window.msRequestAnimationFrame;

了解更多

基础知识