什么是浏览器引擎前缀

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/01/25/%E4%BB%80%E4%B9%88%E6%98%AF%E6%B5%8F%E8%A7%88%E5%99%A8%E5%BC%95%E6%93%8E%E5%89%8D%E7%BC%80/

摘要

本文主要讲述了：

CSS
JavaScript

正文

CSS

IE：-ms-
Firefox：-moz-
Edg：-webkit-
Chrome：-webkit-

注意：通过 JavaScript 来操作元素的style时，除了 IE 浏览器之外，其他浏览器都选择将 CSS 属性前缀的首字母大写

示例：

#foo {
  -ms-transition: all 4s ease;
  -moz-transition: all 4s ease;
  -webkit-transition: all 4s ease;
  transition: all 4s ease;
}

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div>hello, jsweibo</div>
    <script>
      document.querySelector('div').addEventListener('click', function () {
        console.log(this.style.msTransition); // valid

        console.log(this.style.MozTransition); // valid

        console.log(this.style.webkitTransition); // valid
        console.log(this.style.WebkitTransition); // valid

        console.log(this.style.transition); // valid

        console.log(getComputedStyle(this));
      });
    </script>
  </body>
</html>

JavaScript

如果整个 API 都是实验性质的，那么就在 API 的名称前加上前缀
如果 API 是标准的，但属性和方法是实验性质的，那么就在属性和方法的名称前加上前缀

API

IE：MS
Firefox：Moz
Edg：WebKit（注意：K为大写）
Chrome：WebKit（注意：K为大写）

示例：

console.log(window.MSCSSMatrix);
console.log(window.MozCSSMatrix);
console.log(window.WebKitCSSMatrix);
console.log(window.CSSMatrix);

属性和方法

IE：ms
Firefox：moz
Edg：webkit
Chrome：webkit

示例：

console.log(window.msRequestAnimationFrame);
console.log(window.mozRequestAnimationFrame);
console.log(window.webkitRequestAnimationFrame);
console.log(window.requestAnimationFrame);