使用 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