CSS兼容攻略

xialong 發布于2019-08-30 15:52 / 843人閱讀

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

blog
md

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

1 是否需要兼容

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

如這種情況下的CSS Shapes：

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

2 是否只需后退處理即可

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

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

3 需要額外區別的情況

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

CSS hack技巧大全

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

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

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

4 強行效果一樣

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

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

又多又雜，還是看這吧

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116403.html

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

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

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

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

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

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

roadtogeek 2019-08-19 18:25 評論0 收藏0
網頁元素CSS居中實現完整攻略

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

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

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

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