CSS供應商前綴

CSS供應商前綴,自動前綴的概述以及為什麼它們之間的相關性不高

供應商前綴是瀏覽器用來為我們的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 Mini)

由於Opera和Edge是基於鉻的,-o--ms-可能很快就會過時。但是正如我們所說,供應商前綴從整體上也已經過時了。

寫前綴很困難,主要是因為不確定性。您實際上是否需要為一個屬性添加前綴?一些在線資源也已經過時,這使得正確做事變得更加困難。像這樣的項目自動前綴可以使整個過程自動化,而無需我們查找是否需要前綴,或者該功能現在穩定並且應該刪除該前綴。它使用來自caniuse.com的數據,該網站是有關瀏覽器支持的所有方面的很好的參考網站。

如果您使用React或Vue,則類似create-react-app和Vue CLI,這是開始構建應用程序的兩種常用方法,autoprefixer開箱即用,因此您甚至不必擔心。

免費下載我的CSS手冊


更多CSS教程: