SCSS 編譯 vendor prefix 問題

TL;DR

別擔心、別手寫 vendor prefix。Next.js / Vite / CRA 都內建 Autoprefixer,會根據 browserslist 自動加 -webkit- / -moz- 等前綴。你寫標準 CSS 就好。

什麼是瀏覽器前綴?

歷史遺物 —— 為了讓尚未標準化的 CSS 屬性能在不同瀏覽器跑,廠商會加自家前綴:

/* 手寫前綴的時代(別這樣做了!) */
-webkit-transform: rotate(45deg);  /* Chrome, Safari, 舊 iOS */
-moz-transform: rotate(45deg);     /* 舊 Firefox */
-ms-transform: rotate(45deg);      /* IE 9 */
-o-transform: rotate(45deg);       /* Opera */
transform: rotate(45deg);          /* 標準 */

2026 年的現實:transform 早已是標準,所有現代瀏覽器都直接支援。手寫前綴 = 浪費 bundle size + 維護成本。

自動化方案:Autoprefixer

Autoprefixer 是 PostCSS 插件,讀你的 browserslist 設定,自動加 / 刪前綴。

npm install -D postcss autoprefixer

/* 你寫的 */
.box { display: flex; user-select: none; }

/* Autoprefixer 編譯後(根據 browserslist) */
.box {
  display: flex;
  -webkit-user-select: none;
  -ms-user-select: none;          /* IE 11 */
  user-select: none;
}

各框架的內建情況

設定 browserslist

package.json:

{
  "browserslist": [
    ">0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not dead"
  ]
}

這個設定決定 Autoprefixer 要為哪些瀏覽器加前綴。範圍越大 → CSS 越肥。實務上 >0.5% + not dead 已經 cover 95%+ 使用者。

自建 Webpack / 純 PostCSS 怎麼設

postcss.config.js:

module.exports = {
  plugins: {
    autoprefixer: {},
  },
};

webpack.config.js:

module.exports = {
  module: {
    rules: [{
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      //                                   ^^^^^^^^^^^^^^^ 必須在 css-loader 後
    }],
  },
};

loader 順序很重要

Webpack loaders 從右往左跑:sass-loader(SCSS→CSS)→ postcss-loader(加前綴)→ css-loader → style-loader。順序錯了 PostCSS 處理不到結果。

何時還是要手動處理

雖然 Autoprefixer 很萬能,但 有幾個邊角情況 還是要注意:

1. 非標準屬性

像 -webkit-overflow-scrolling: touch(iOS 慣性滾動)、-webkit-tap-highlight-color(行動點擊高亮),這些不是「未標準化的標準屬性」 ,Autoprefixer 不會幫你加。要的話自己寫。

2. CSS Custom Properties / @supports

@supports (backdrop-filter: blur(10px)) {
  .glass { backdrop-filter: blur(10px); }
}
@supports not (backdrop-filter: blur(10px)) {
  .glass { background: rgba(255,255,255,0.8); }
}

特性偵測 比加前綴更現代。Safari 有些屬性還是要 -webkit-backdrop-filter,但用 @supports 配 fallback 更乾淨。

檢查實際 CSS 輸出

開發時打開 DevTools → Computed → 看實際 applied 的屬性。Autoprefixer 加的前綴會出現在那。Build 時可以跑:

# Next.js
npm run build && cat .next/static/css/*.css | grep -- '-webkit-'

確認前綴有正確加上去。