CSS Secret——CSS的瀏覽器兼容

使用前綴

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; 
    } 
}