瀏覽器引擎字首
瀏覽器廠商過去常常為實驗性或非標準的 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;
如果在程式碼庫中遇到上述程式碼,你可以安全地移除除了第一行之外的所有內容。所有瀏覽器都支援不帶供應商字首且不帶 window 的 requestAnimationFrame。
js
requestAnimationFrame(callback);