CSS Compatibility Guide

Usually you should pay more attention. If you are not sure about compatibility, you should check more about can i use. Well, you also need to understand to what extent the page should be compatible.

1 Whether it needs to be compatible

You have to think about this issue well at the beginning. Some effects are not compatible if they are not compatible. As long as the retreat is smooth,

For example, CSS Shapes in this case:

The picture comes from w3cplus. In this case, for browsers that do not support the CSS Shapes attribute, it is better not to force support.

2 Is it possible to just back off processing?

Compared with the first point, additional back off processing (which should be included in the first place), such as CSS gradient back processing:

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

3 Situations that require additional distinction

If you use css to handle it, it will be a variety of HACKs:

CSS hack skills collection

Smart use of browser CSS attribute values Incompatible backward compatibility hack techniques

If you use JS to process it, the best way is to judge the ability. You can use modernizr.js or the following code:

if ( !'shape-margin' in document.documentElement.style) {}
//如果不支持shape-margin属性则如何如何

4 Force the effect to be the same

At this step, we can only come up with this kind of code

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

For more articles related to CSS compatibility strategies, please pay attention to the PHP Chinese website!