CSS兼容攻略

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濾鏡*/

又多又雜，仍是看這吧