CSS @supports 태그를 사용하여 브라우저 호환성 분석 감지

@supports(prop:value) {   
 /* 各种样式 */
}

@supports (display: flex) {   
 p { display: flex; }   
}

@supports not (display: flex) {   
 p { float: left; } /* 替换样式 */
}

/* or */
@supports (display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex) {   

    /* use styles here */
}   

/* and */
@supports (display: flex) and (-webkit-appearance: caret) {   

 /* something crazy here */
}   

/* and and or */
@supports ((display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex)) and (-webkit-appearance: caret) {   

    /* use styles here */
}

//测试环境，Chrome:34.0.1847.131 m
var res01 = CSS.supports("text-decoration-style", "blink");   
//Outputs: false
console.log(res01);   

var res02 = CSS.supports("display", "flex");   
//Outputs: true
console.log(res02);   

var res03 = CSS.supports("( transform-origin: 5% 5% )");   
//Outputs: false
console.log(res03);   

var res04 = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " +   
                      "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );   
//Outputs: false
console.log(res04);

section {   
 float: left;   
}   

@supports (display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex) {   

    section {   
      display: -webkit-flex;   
      display: -moz-flex;   
     display: flex;   
     float: none;   
    }   
}