/

CSS供應商前綴

CSS供應商前綴

CSS供應商前綴（Vendor prefixes）的概述，Autoprefixer以及為什麼它們在未來不太重要。

供應商前綴是瀏覽器提供給我們CSS開發者的一種方式，讓我們可以使用尚未被認為是穩定的新功能。

然而，需要注意的是，這種方法正在逐漸不受歡迎，取而代之的是使用實驗性標誌，這些標誌必須在用戶的瀏覽器中明確啟用。

為什麼會這樣呢？因為開發者們並不是將供應商前綴視為預覽功能的一種方式，而是直接將其用於生產環境中，而這被CSS工作組視為有害的行為。

主要原因是，一旦您添加了一個標誌，開發者們開始在生產環境中使用它時，如果瀏覽器意識到需要進行更改，它就處於一個非常尷尬的位置。使用標誌，除非您能夠說服所有訪問者在其瀏覽器中啟用該標誌，否則無法推送該功能（開個玩笑，別嘗試）。

話雖如此，讓我們看看供應商前綴是什麼。

我特別記得過去在處理CSS過渡（Transitions）時使用它們。而不僅僅只是使用 transition 屬性，您還需要這樣做：

1
2
3
4
5
6
7
.myClass {
 -webkit-transition: all 1s linear;
 -moz-transition: all 1s linear;
 -ms-transition: all 1s linear;
 -o-transition: all 1s linear;
 transition: all 1s linear;
}

現在您只需使用：

1
2
3
.myClass {
 transition: all 1s linear;
}

因為這個屬性現在已經得到了所有現代瀏覽器的良好支持。

所使用的前綴是：

  • -webkit-（Chrome、Safari、iOS Safari / iOS WebView、Android）
  • -moz-（Firefox）
  • -ms-（Edge、Internet Explorer）
  • -o-（Opera、Opera Mini）

由於Opera和Edge基於Chromium，-o-和-ms-可能很快就會被淘汰。但正如我們所說，供應商前綴作為一整套也將不再流行。

撰寫前綴很困難，主要是因為存在不確定性。您是否真的需要為特定屬性添加前綴？一些線上資源也已經過時，這使得情況變得更加困難。
像Autoprefixer這樣的專案可以完全自動化這個過程，無需我們去弄清楚是否仍需要前綴，或者該功能現在是否穩定並且應該去除前綴。它使用了來自caniuse.com的數據，這是一個關於瀏覽器支持的非常好的參考網站。

如果您使用React或Vue，像create-react-app和Vue CLI這樣的專案，這是兩個常見的構建應用程序的方式，都已經內置使用了autoprefixer，因此您甚至不需要擔心這個問題。

tags: [“CSS”, “Vendor prefixes”, “Autoprefixer”, “browser support”]