CSS兼容攻略

xialong 發(fā)布于2019-08-30 15:52 / 963人閱讀

摘要：平常要多留心，摸不準(zhǔn)兼容如何就該多看看，額，還有就是自己要明白頁面該兼容到什么程度是否需要兼容一上來得把這個問題想好，有些效果不兼容就不兼容唄，只要后退平穩(wěn)即可，如這種情況下的圖片來自，這種情況下，對于不支持屬性的瀏覽器，還是不用強(qiáng)行支持的

blog
md

平常要多留心，摸不準(zhǔn)兼容如何就該多看看can i use，額，還有就是自己要明白頁面該兼容到什么程度

1 是否需要兼容

一上來得把這個問題想好，有些效果不兼容就不兼容唄，只要后退平穩(wěn)即可，

如這種情況下的CSS Shapes：

圖片來自w3cplus，這種情況下，對于不支持CSS Shapes屬性的瀏覽器，還是不用強(qiáng)行支持的好。

2 是否只需后退處理即可

跟第一點(diǎn)比就是加上額外的后退處理（本來就該有的），如CSS漸變的后退處理：

    background-color: #f9efee;
    background-image: linear-gradient(to left, #f5e5e3 0%, #ffffff 52%, #f5e5e3 100%);

3 需要額外區(qū)別的情況

用css處理的話就是各種HACK了：

CSS hack技巧大全

巧用瀏覽器CSS屬性值的不兼容向下兼容hack技巧

用JS處理的話，最好的方法自然是能力判斷了，可以使用modernizr.js或如下代碼：

if ( !("shape-margin" in document.documentElement.style)) {}
//如果不支持shape-margin屬性則如何如何

4 強(qiáng)行效果一樣

到了這一步，那只能拿出這種代碼了

text-shadow: 2px 2px 15px #333;
filter: glow(color=#333333, strength=2);
/*老IE不支持文字陰影，對其使用IE濾鏡*/

又多又雜，還是看這吧

GPU云服務(wù)器云服務(wù)器 css兼容服務(wù)器css兼容性 beta2的CSS兼容性兼容模式不兼容js

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116403.html

相關(guān)文章

FE.WX-小程序“無聊廣場”游戲前端性能優(yōu)化與踩坑攻略

摘要：本文主要針對小程序無聊廣場的前端開發(fā)內(nèi)容做總結(jié)，記錄常見的一些老生常談的進(jìn)階手法，對小程序中的動畫音頻等踩坑做出解決方案。背景一個交互不復(fù)雜，對刷新頻率和動畫效果要求不高的小游戲，不需要使用canvas主導(dǎo)的解決方案，使用dom操作一樣可以完成。節(jié)省了cocos creater的學(xué)習(xí)成本，值得一試。本文主要針對小程序無聊廣場的前端開發(fā)內(nèi)容做總結(jié)，記錄常見的一些老生常談的進(jìn)階手法，對...

qpal 2019-08-22 18:26 評論0 收藏0
少女風(fēng)vue組件庫制作全攻略~~

摘要：組件監(jiān)聽自定義事件。組件觸發(fā)自定義事件。生命周期鉤子函數(shù)，后組件的所有的事件監(jiān)聽器會被移除。技術(shù)點(diǎn)總結(jié)組件設(shè)計(jì)的思想包括單數(shù)據(jù)流事件中心，核心是組件通信。完善給彈出日期面板和關(guān)閉日期面板增加組件自定義事件即調(diào)用觸發(fā)和事件。預(yù)覽組件庫官網(wǎng) github地址如果喜歡各位小哥哥小姐姐給個小星星鼓勵一下哈，請勿在生產(chǎn)環(huán)境中使用，供學(xué)習(xí)&交流~~ showImg(https://user...

springDevBird 2019-05-21 19:19 評論0 收藏0
[譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

摘要：一般來說，聲明式編程關(guān)注于發(fā)生了啥，而命令式則同時(shí)關(guān)注與咋發(fā)生的。聲明式編程可以較好地解決這個問題，剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區(qū)處理，這樣就能讓開發(fā)者專注于發(fā)生了啥，這里推薦一波與。本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。繼續(xù)譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...

roadtogeek 2019-08-19 18:25 評論0 收藏0
網(wǎng)頁元素CSS居中實(shí)現(xiàn)完整攻略

摘要：水平居中行內(nèi)元素解決方案只需要把行內(nèi)元素包裹在一個屬性為的父層元素中，并且把父層元素添加如下屬性即可水平居中塊狀元素解決方案這里可以設(shè)置頂端外邊距水平居中多個塊狀元素解決方案將元素的屬性設(shè)置為，并且把父元素的屬性設(shè)置為即可水平居中多水平居中：行內(nèi)元素解決方案只需要把行內(nèi)元素包裹在一個屬性display為block的父層元素中，并且把父層元素添加如下屬性即可： .parent { ...

mikasa 2019-08-28 18:19 評論0 收藏0
分享一些遇到的好文章

摘要：移動端布局總結(jié)移動端全兼容的移動端知識涵蓋偽類等全移動端不得不講的頭標(biāo)簽移動端自適應(yīng)方案移動端適配總結(jié)布局新舊混合寫法詳解兼容微信使用實(shí)現(xiàn)手淘頁面的終端適配淘寶彈性布局方案實(shí)踐理解所需的知識產(chǎn)生的小數(shù)像素問題高性能動畫動畫的性能優(yōu)化處理和動移動端rem布局總結(jié) 移動端全兼容的flexbox 移動端知識(涵蓋、css、偽類等)【全】移動端不得不講的頭標(biāo)簽移動端自適應(yīng)方案移動端適...

Tikitoo 2019-08-20 14:49 評論0 收藏0