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

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

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

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

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

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

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

.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;
}

現在您只需使用:

.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,因此您甚至不需要擔心這個問題。