up
down
Close
架站盒子
Web Development Box
 

CSS -webkit-、-moz-、-o-的意思(瀏覽器兼容)

│ 4278 Views │ CSS
CSS -webkit-、-moz-、-o-的意思(瀏覽器兼容)
CSS -webkit-、-moz-、-o-的意思(瀏覽器兼容)
  1. 前綴
  2. 詳細說明
  3. 實際操作

相信有在寫CSS的朋友一定都看過-webkit--moz--o-等,明明一個語法為什麼要再重複貼上三行並加上這些字首,如果不加好像也不會怎樣?它們有什麼差別,以下將說明三者的差異。

前綴

這些字首一般稱為「前綴(Prefix)」,是瀏覽器供應商為了實驗性質而制定的,在新屬性出現時,作為實驗性開發而使用的前綴字,這樣可以防止在實驗過程中破壞標準語法,待實驗沒問題後,通常會移除轉而使用標準語法。

簡單來說,就是各家瀏覽器不一定都支援CSS3新屬性,因此當某些CSS在其他瀏覽器上失效,可能就是少了前綴字,建議設計CSS時可以參考瀏覽器兼容資訊,以下列出常見的前綴。


-webkit- /* Chrome、Safari */
-moz- /* Firefox */
-o- /* Opera */
-ms- /* Internet Explorer */

詳細說明

-webkit-

用於 Chrome、Safari、較新版本的 Opera 、 Edge,以及幾乎所有 iOS 的瀏覽器,包括 Firefox for iOS;基本上,泛指任何基於 WebKit 或 Chromium 的瀏覽器。

-moz-

用於 Firefox 火狐瀏覽器。

-o-

指舊的 WebKit 之前的 Opera 版本瀏覽器。

-ms-

用於 Chromium 之前的 Internet Explorer 和 Microsoft Edge 瀏覽器。

實際操作

See the Pen Untitled by kumo (@kumo-tw) on CodePen.

CSS兼容查詢:https://caniuse.com

延伸閱讀

本文是否對您有幫助?