供应商前缀

浏览器供应商过去常常为实验性或非标准的CSS属性和JavaScript API添加前缀，以便开发人员可以尝试新想法。理论上，这有助于防止他们的实验被依赖，然后在标准化过程中破坏Web开发人员的代码。

Web开发人员在生产网站上包含了带有前缀的功能，尽管它们是实验性的。这使得浏览器供应商在开发新功能时更难以确保兼容性。包含带有前缀的功能还会损害较小的浏览器供应商，他们最终不得不添加其他浏览器的前缀才能呈现流行的网站。

现在，浏览器中的实验性功能“置于标志之后”。这允许开发人员更改浏览器配置以测试即将推出的功能。浏览器现在在用户控制的标志或首选项后面添加实验性功能。可以为较小的规范添加标志，以便更快地达到稳定状态。

CSS 前缀

您在较旧的代码库中最常看到的浏览器CSS前缀包括

  • -webkit-（Chrome、Safari、较新版本的Opera和Edge、几乎所有iOS浏览器，包括iOS版Firefox；基本上，任何基于WebKit或Chromium的浏览器）
  • -moz-（Firefox）
  • -o-（旧的WebKit之前的Opera版本）
  • -ms-（Internet Explorer和Microsoft Edge，在Chromium之前）

示例用法

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
transition: all 4s ease;

API 前缀

从历史上看，浏览器供应商也对实验性API使用过前缀。如果整个接口都是实验性的，则接口的名称将带有前缀（但接口内的属性或方法除外）。如果将实验性属性或方法添加到标准化接口中，则将为单个方法或属性添加前缀。

接口前缀

接口名称的前缀为大写

  • WebKit（Chrome、Safari、较新版本的Opera和Edge、几乎所有iOS浏览器（包括iOS版Firefox）；基本上，任何基于WebKit和Chromium的浏览器）
  • Moz（Firefox）
  • O（较旧的，WebKit之前的，Opera版本）
  • MS（Internet Explorer和Microsoft Edge，在Chromium之前）

属性和方法前缀

属性和方法的前缀为小写

  • webkit（Chrome、Safari、较新版本的Opera和Edge、几乎所有iOS浏览器（包括iOS版Firefox）；基本上，任何基于WebKit和Chromium的浏览器）
  • moz（Firefox）
  • o（旧的，WebKit之前的，Opera版本）
  • ms（Internet Explorer和Microsoft Edge，在Chromium之前）

示例用法

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

如果您在代码库中遇到上述代码，则可以安全地删除除第一行以外的所有行。所有浏览器都支持requestAnimationFrame，无需供应商前缀，也无需window

js
requestAnimationFrame(callback);

另请参阅