使用 Autoprefixer 自动处理浏览器兼容性

Autoprefixer 插件是最流行的 CSS 处理工具之一，用于自动处理浏览器兼容性问题，比如自动添加 CSS 属性前缀。

安装

使用下面的命令安装：

下载安装完成后，需要在 package.json 中配置一个 script 命令，如下所示，css-prefix 表示自动格式化 css 文件。下面的配置文件有个隐藏的 bug 没有达到预期修改，下面详细讲解。

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "css": "npm-run-all css-compile css-prefix",
    "css-compile": "sass ./src/main.scss:./dist/main.css",
    "css-prefix": "postcss dist/*.css --use autoprefixer -d dist/"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.0.4",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.1.10",
    "postcss-cli": "^8.3.0",
    "sass": "^1.29.0"
  }
}

运行 npm run 执行 css 命令，如下所示：

上面的命令会第一步执行 sass 命令，把 scss 文件编译为 css 文件。第二步 执行 postcss 命令，处理编译后的 css 文件，处理结果如下所示：

::placeholder {
  color: gray;
}

.flex {
  display: flex;
  transition: 1s;
}

编译后的结果如下：

::-moz-placeholder {
  color: gray;
}

:-ms-input-placeholder {
  color: gray;
}

::placeholder {
  color: gray;
}

.flex {
  display: flex;
  transition: 1s;
}

上面结果显示 ::placeholder 属性已经自动替换，但是 display 的 flex 属性和 transition 没有自动处理，没有达到预期效果。

默认情况下 Autoprefixer 只会兼容浏览器当前主版本的前一浏览器版本，隐藏根据当前浏览器主版本不会自动生成 -webkit-。需要在 package.json 文件中添加 browserslist 属性值，如下所示：

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "css": "npm-run-all css-compile css-prefix",
    "css-compile": "sass ./src/main.scss:./dist/main.css",
    "css-prefix": "postcss dist/*.css --use autoprefixer -d dist/"
  },
  "author": "",
  "license": "ISC",
  "browserslist": "last 4 versions",
  "dependencies": {
    "autoprefixer": "^10.0.4",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.1.10",
    "postcss-cli": "^8.3.0",
    "sass": "^1.29.0"
  }
}

添加 browserslist 参数后编译的结果如下所示：

::-webkit-input-placeholder {
  color: gray;
}

::-moz-placeholder {
  color: gray;
}

:-ms-input-placeholder {
  color: gray;
}

::-ms-input-placeholder {
  color: gray;
}

::placeholder {
  color: gray;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

另外一种方法是在下面下添加 .browserslistrc 文件设置兼容的浏览器版本，Autoprefixer 会根据配置自动决定兼容的浏览器

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 60
Firefox >= 60
# needed since Legacy Edge still has usage; 79 was the first Chromium Edge version
# should be removed in the future when its usage drops or when it's moved to dead browsers
not Edge < 79
iOS >= 10
Safari >= 10
Android >= 6
not Explorer <= 11