CSS兼容攻略

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

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

blog
md

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

1 是否需要兼容

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

如這種情況下的CSS Shapes：

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

2 是否只需后退處理即可

跟第一點(diǎn)比就是加上額外的后退處理（本來(lái)就該有的），如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不支持文字陰影，對(duì)其使用IE濾鏡*/

又多又雜，還是看這吧

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116403.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

Tikitoo 2019-08-20 14:49 評(píng)論0 收藏0