CSS 中瀏覽器供應商前綴 -webkit、-moz、-ms、-o 代表的意思)

瀏覽器供應商前綴 - Vendor Prefixing

-webkit、-moz、-ms、-o 一般稱為內核識別碼、前綴，英文直接稱為 Vendor Prefixing。

CSS Vendor prefixes (or browser prefixes) 是瀏覽器供應商為了實驗性質不穩定的新屬性開發時所使用的前綴字，以防止破壞標準語法。隨著時間的推移，當實驗性的屬性穩定時就會移除(理論上)實驗性前綴轉而標準語法，通常認為先指定供應商前綴版本然後再指定標準語法版本是一種很好的做法，以便標準語法在實現後將覆蓋 Vendor prefixes 的屬性設置。

以下為假設在 border-radius 為實驗性的情況下的範例，在完全支持 border-radius 屬性前，都需要添加前綴。

.elementClass {
    border-radius: 1rem;
    -o-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -webkit-border-radius: 1rem;
}

簡單而言就是瀏覽器允許訪問尚未被認為穩定的新 CSS 功能的一種方式。

詳細介紹

在過去，寫前綴是很麻煩的事情。而為了解決這種問題，有人作出了可以自動化添加任何所需前綴的工具。像是 Autoprefixer(一款 PostCSS 插件) ，它根據 CanIuse 所提供的兼容性支援度數據產生前綴。

而許多目前主流的框架 (e.g. create-react-app、Vue cli 和 postcss) 等也都使用 Autoprefixer，因此添加前綴在主流已成為過去式了!!!

-webkit-

Chrome / Safari / 更新版本的 Opera 和 Edge / 幾乎所有 iOS 瀏覽器 (包括 Firefox for iOS) / Android WebView

= 總結而言：任何基於 Webkit 或 Chromium 內核的瀏覽器 (e.g. Brave) =

-moz-

Firefox

-ms-

Internet Explorer (☠️ EOL June 15, 2022) / 於 Chromium 內核之前的 Microsoft Edge

-o-

Opera (舊 pre-Webkit 版本)

前綴現今狀態

目前各家瀏覽器對於新功能屬性的支援度都越來越高，同時供應商也慢慢開始放棄前綴，轉而支持瀏覽器設置的功能標誌。但是前綴並沒有完全消失，仍然有一些前綴需要添加至 CSS。

並且有一些解決前綴和瀏覽器而創建的工具已經半途而廢，在使用那些工具前應首先檢查是否是最新的。

而像 Autoprefixer 是依靠 CanIuse 的數據直接保持更新，網上有人也推薦另一款Emmet 具有強大的前綴功能，且大多程式編輯器都支援 Emmet。

Emmet 它有 css.autoInsertVendorPrefixes 自動插入前綴的功能，並且有一種叫 Reflect CSS Value 的命令可以更新 CSS 中同一屬性的所有前綴版本的值。

(Emmet 相關文檔：Emmet Documentation - Reflect CSS Value)

📚 參考資料 - Reference

[1] Robards, T. (2020, June 25). CSS Fundamentals: Vendor Prefixing

https://itnext.io/css-fundamentals-vendor-prefixing-b339d3c9859a

[2] EasonJim, (2016, November 7). css3中-moz、-ms、-webkit,-o分别代表的意思，以及微信浏览器内核分析

https://www.cnblogs.com/EasonJim/p/6140097.html

[3] MDN Web Docs Glossary

https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix

額外閱讀

Is Vendor Prefixing Dead? By Rob O'Leary

🌼 End

Photo by Kiyoung Jung on AFP