使用前缀
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;
}
}
