瀏覽器引擎字首

瀏覽器廠商過去常常為實驗性或非標準的 CSS 屬性和 JavaScript API 新增字首,以便開發者可以嘗試新想法。理論上,這有助於防止在標準化過程中,這些實驗性功能被過度依賴,從而導致網頁開發者的程式碼崩潰。

儘管是實驗性的,網頁開發者仍將帶字首的功能包含在生產網站中。這使得瀏覽器廠商在開發新功能時更難確保相容性。包含帶字首的功能也損害了小型瀏覽器廠商,他們最終不得不新增其他瀏覽器的字首才能渲染流行的網站。

現在,瀏覽器中的實驗性功能都被“放在一個標誌後面”。這允許開發者更改瀏覽器配置來測試即將推出的功能。瀏覽器現在將實驗性功能放在使用者可控制的標誌或偏好設定後面。可以為較小的規範新增標誌,從而更快地達到穩定狀態。

CSS 字首

你在舊程式碼庫中會看到的最常見的瀏覽器 CSS 字首包括:

  • -webkit- (Chrome、Safari、新版本的 Opera 和 Edge,幾乎所有 iOS 瀏覽器,包括適用於 iOS 的 Firefox;基本上,任何基於 WebKit 或 Chromium 的瀏覽器)
  • -moz- (Firefox)
  • -o- (舊的 WebKit 之前的 Opera 版本)
  • -ms- (Internet Explorer 和 Microsoft Edge,在 Chromium 之前)

使用示例

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;

如果在程式碼庫中遇到上述程式碼,你可以安全地移除除了最後一行之外的所有內容。所有瀏覽器都支援不帶供應商字首的transitions

css
transition: all 4s ease;

API 字首

從歷史上看,瀏覽器廠商也為實驗性 API 使用字首。如果整個介面都是實驗性的,那麼介面的名稱會帶字首(但其中的屬性或方法不會)。如果向標準化介面添加了實驗性屬性或方法,那麼單個方法或屬性會帶字首。

介面字首

介面名稱的字首採用大寫

  • WebKit (Chrome、Safari、新版本的 Opera 和 Edge,幾乎所有 iOS 瀏覽器(包括適用於 iOS 的 Firefox);基本上,任何基於 WebKit 和 Chromium 的瀏覽器)
  • Moz (Firefox)
  • O (舊的 WebKit 之前的 Opera 版本)
  • MS (Internet Explorer 和 Microsoft Edge,在 Chromium 之前)

屬性和方法字首

屬性和方法的字首採用小寫

  • webkit (Chrome、Safari、新版本的 Opera 和 Edge,幾乎所有 iOS 瀏覽器(包括適用於 iOS 的 Firefox);基本上,任何基於 WebKit 和 Chromium 的瀏覽器)
  • moz (Firefox)
  • o (舊的 WebKit 之前的 Opera 版本)
  • ms (Internet Explorer 和 Microsoft Edge,在 Chromium 之前)

使用示例

js
window.requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame;

如果在程式碼庫中遇到上述程式碼,你可以安全地移除除了第一行之外的所有內容。所有瀏覽器都支援不帶供應商字首且不帶 windowrequestAnimationFrame

js
requestAnimationFrame(callback);

另見