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