這篇文章主要講解了“CSS怎么檢測瀏覽器的兼容情況”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS怎么檢測瀏覽器的兼容情況”吧！
專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)大通免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
CSS @supports標(biāo)記在CSS代碼里跟@media查詢語句的語法相似：
CSS Code復(fù)制內(nèi)容到剪貼板
@supports(prop:value) {
/* 各種樣式 */
}
CSS @supports允許程序員用多種不同的方法來探測當(dāng)前瀏覽器是否支持某項(xiàng)CSS樣式特征。
基本屬性檢測
你可以執(zhí)行對基本屬性和屬性值的檢測：
CSS Code復(fù)制內(nèi)容到剪貼板
@supports (display: flex) {
div { display: flex; }
}
這是@supports標(biāo)記最基本的用法。
not關(guān)鍵字
@supports標(biāo)記可以和‘not’關(guān)鍵字組合，用來應(yīng)對不支持的情況：
CSS Code復(fù)制內(nèi)容到剪貼板
@supports not (display: flex) {
div { float: left; } /* 替換樣式 */
}
多檢測及條件檢測
CSS Code復(fù)制內(nèi)容到剪貼板
/* 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 */
}
Javascript CSS.supports()
在Javascript中通過使用window.CSS.supports方法來對CSS @supports進(jìn)行檢測，規(guī)范中提供了兩個方法，一個方法可以接收兩個參數(shù)boolValue = CSS.supports(propertyName, value);另一個可以接收一個字符串（A DOMString containing the condition to check），boolValue = CSS.supports(supportCondition);具體使用看下例：
JavaScript Code復(fù)制內(nèi)容到剪貼板
//測試環(huán)境，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);
@supports的使用場景
大多數(shù)情況，@supports是用來支持老式瀏覽器，并在有可能的情況下，利用現(xiàn)代瀏覽器的新特征來提高用戶體驗(yàn)。@supports的一個最重要的使用場景是頁面布局。很多現(xiàn)代瀏覽器都提供了對flexbox網(wǎng)頁布局的支持，在這種還有很多瀏覽器不支持的情況下，你的代碼可以寫成這樣：
CSS Code復(fù)制內(nèi)容到剪貼板
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;
}
}
感謝各位的閱讀，以上就是“CSS怎么檢測瀏覽器的兼容情況”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS怎么檢測瀏覽器的兼容情況這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
