Death of CSS vendor prefix

逐漸凋零的瀏覽器引擎前綴

@ CSS

你還記得瀏覽器引擎前綴嗎？

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

通常是某些實驗性、非標準的 CSS 前需要添加的前綴語法，像是：

  • -webkit- (Chrome, Safari, 較新版本的 Opera 與 Edge, 近乎所有 iOS 上的瀏覽器包含了 iOS for Firefox 基本上所有 WebKit 或 Chromium 基底的瀏覽器引擎)
  • -moz- (Firefox)
  • -o- (舊版本 Opera)
  • -ms- (使用 Chromium 基底之前的 Internet Explorer 和 Microsoft Edge)

這些前綴是為了讓開發者在瀏覽器尚未正式支援的情況下用於實現新的 CSS 特性，甚至當時還時常會使用 PostCSS 這類預處理器的 autoprefixer🔗 插件來預處理 CSS 添加上這些前綴，以便讓網站語法能夠適應更廣的用戶。

但近期會發現需要前綴的屬性直線下降，且未來也大機率不會再有新的前綴會被加入使用了。

為什麼瀏覽器前綴會逐漸消失？

原因是因為測試用的前綴已經偏移其原始目的 —— 功能實驗

隨著前綴數量的增多，事情也變得愈加混亂，瀏覽器廠商逐漸認識到過多的實驗性前綴會導致開發者對非標準化功能的依賴，進而影響到網站在不同瀏覽器中的兼容性。

因此現今瀏覽器會更加謹慎地引入實驗性功能，並在引入前確保新功能已經有足夠的完成度以及跨瀏覽器的一致性，並且逐漸遠離使用瀏覽器引擎前綴來測試新功能，而是透過在瀏覽器內設定手動切換，或是提供測試版本的瀏覽器（Chrome Canary🔗、Firefox Nightly🔗）用於實驗用途。

總結

網頁正邁向更為一致且注重標準化的方向，這對於開發者來說是個好消息！

延伸閱讀