您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)常見css屬性進(jìn)行瀏覽器兼容性的示例分析的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
css3.jpeg
其實,在實際的開發(fā)過程中,我們對常見的css屬性兼容情況了然于胸,才能極大的提高我們的開發(fā)效率,寫出可以進(jìn)行優(yōu)雅降級的代碼。這里并不是說一定要所有的css屬性兼容情況都要背下來,對于使用率較低的,我們直接使用Can I Use 進(jìn)行檢索。
邊框:
border-radius: 最低兼容至 IE9,其它瀏覽器兼容情況優(yōu)良。
box-shadow: 最低兼容至IE9, 其它瀏覽器兼容情況優(yōu)良。
背景:
background-size: 最低兼容至IE9, 其它瀏覽器兼容情況優(yōu)良。
字體:
@font-face: IE9及以上版本的IE瀏覽器,支持引入任何格式的字體文件,而在IE9之前的瀏覽器,只支持引入EOT格式的字體文件。 其它瀏覽器兼容情況優(yōu)良。
2D轉(zhuǎn)換:
transform: 最低兼容至IE9(需要添加-ms-前綴),其它瀏覽器兼容情況優(yōu)良。在transform屬性前加入瀏覽器內(nèi)核前綴是很好的實踐。不建議在svg元素上使用transform屬性,最新版本的IE并不支持這一使用方式。
3D轉(zhuǎn)換:
IE10 和 Firefox 支持 3D 轉(zhuǎn)換。Chrome 和 Safari 需要前綴 -webkit-。Opera 仍然不支持 3D 轉(zhuǎn)換,它只支持2D 轉(zhuǎn)換。
過渡:
transition:最低兼容至IE10,其它瀏覽器兼容情況優(yōu)良。Safari瀏覽器需要前綴-webkit-,其它大部分瀏覽器對此并未有前綴要求,因此除了特殊情況,可以不添加其它瀏覽器的前綴。
動畫:
animation:兼容情況與transition屬性大致相同。
感謝各位的閱讀!關(guān)于“常見css屬性進(jìn)行瀏覽器兼容性的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。