CSS Secret——CSS的浏览器兼容-CSDN博客

本文链接：https://blog.csdn.net/exialym/article/details/51742978

使用前缀

background: rgb(255, 128, 0); 
background: -moz-linear-gradient(0deg, yellow, red); background: -o-linear-gradient(0deg, yellow, red); background: -webkit-linear-gradient(0deg, yellow, red); background: linear-gradient(90deg, yellow, red);

这样的特性意味着不同类型和版本浏览器对它们有不同的实现。所以首先要准备一个浏览器完全不支持的时候的备用情况，在这里就是一个纯色背景。并把不带前缀将来会稳定的版本放在最后。
这样利用层叠就能达到我们的兼容目的。

能力检测

但是通过层叠，有时并不能满足我们的要求，这时就要使用一定的手段了。在JS中，可以通过检测element.style对象是否有对应的属性来判断浏览器是否支持这个规则。
根据支持情况，可以在根元素上加上类，在CSS中，就可以根据这个类来写样式了。

function testProperty(property) {
    var root = document.documentElement;
    if (property in root.style) {
        root.classList.add(property.toLowerCase());
        return true;
    }
    root.classList.add('no-' + property.toLowerCase());
    return false;
}
testProperty('textShadow');
h1 { color: gray; }
.textshadow h1 { 
    color: transparent; 
    text-shadow: 0 0 .3em gray; 
}

当然，我们有时还需要测试某个规则的某个值是否受到支持，那就需要真的将规则的值赋给某个元素了，既然是测试，那就创建一个看不到的元素咯

function testValue(id, value, property) {
    var root = document.documentElement;
    var dummy = document.createElement('p');
    dummy.style[property] = value;
    if (dummy.style[property]) {
        root.classList.add(id);
        return true;
    }
    root.classList.add('no-' + id);
    return false;
}
testValue('lineargradients', 'linear-gradient(red,tan)', "backgroundImage");

使用@supports

这个的支持很不广泛，不建议使用

@supports (text-shadow: 0 0 .3em gray) 
{  
    h1 {  
        color: transparent;
        text-shadow: 0 0 .3em gray; 
    } 
}