對常見的css屬性進行瀏覽器相容性總結 推薦

2022-09-21 03:03:09 字數 824 閱讀 6361

為什麼要對css屬性進行瀏覽器相容性總結呢?用的時候,直接去 can i use 裡面檢索瀏覽器對該屬性的相容性情況不就好了嗎?

css3.jpeg

其實,在實際的開發過程中,我們對常見的css屬性相容情況了然於胸,才能極大的提高我們的開發效率,寫出可以進行優雅降級的**。這裡並不是說一定要所有的css屬性相容情況都要背下來,對於使用率較低的,我們直接使用can i use 進行檢索。

邊框:

背景:background-size: 最低相容至ie9, 其它瀏覽器相容情況優良。

字型:@font-face: ie9及以上版本的ie瀏覽器,支援引入任何格式的字型檔案,而在ie9之前的瀏覽www.cppcns.com器,只支援引入eot格式的字型檔案。 其它瀏覽器相容情況優良。

2d轉換:

transform: 最低相容至ie9(需要新增-ms-字首),其它瀏覽器相容情況優良。在transform屬性前加入瀏覽器核心字首是很好的實踐。不建議www.cppcns.com在svg元素上使用transform屬性,最新版本的ie並不支援這一使用方式。

3d轉換:

ie10 和 firefox 支援 3d 轉換。chrome 和 safari 需要字首 -webkit-。opera 仍然不支援 3d 轉換,它只支援2d 轉換。

過渡:transition:最低相容至ie10,其它瀏覽器相容情況優良。safari瀏覽器需要字首-webkit-,其它大部分瀏覽器對此並未有字首要求,因此除了特殊情況,可以不新增其它瀏覽器的字首。

動畫:animation:相容情況與transition屬性大致相同。

本文位址: /web/css/208809.html

CSS中 important的作用 瀏覽器相容性

對於ie系列瀏覽器都能夠識別,firefox 瀏覽器則不能識別 important只有ie7.0和firefox可以識別,但是ie6.0不能成功應用.在 1 中,之所以把 放在後面是因為ff不識別 而導致只對它設定了一次border 而ie 系列進行了兩次border設定後,後乙個屬性覆蓋了前乙個屬...

HTML5前端教程分享 CSS瀏覽器常見相容問題

在了解相容問題之前,先了解下瀏覽器的核心。瀏覽器最重要或者說核心的部分是 rendering engine 可翻譯為 渲染引擎 不過我們一般習慣將之稱為 瀏覽器核心 作用是負責對網頁語法的解析並渲染 顯示 網頁。不同的瀏覽器核心對網頁編寫語法的解析不一樣,因此同一網頁在不同的核心的瀏覽器裡的渲染 顯...

selenium對瀏覽器屬性操作的方法

最大化 方法一 指明chromedriver路徑 system.setproperty src url string.chrome driver,src url string.driver address 載入使用者配置檔案 chromeoptions options new chromeoptio...