W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
@supports (property: value){
element {
property: value;
}
}
.flex {
float: left;
}
@supports (display: flex){
.flex {
display: flex;
float: none;
}
}
@supports not (property: value){
element {
property: value;
}
}
@supports (property: value) and (property: value) {
element {
property: value;
}
}
@supports (property: value) or (property: value) {
element {
property: value;
}
}
@supports ((property: value) or (property: value)) and (property: value) {
element {
property: value;
}
}
var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);
CSS.supports(property, value)
CSS.supports('property: value');
例子:
CSS.supports('display','flex') === CSS.supports('(display: flex)') // true
兼容性
從上面可以看出,@supports的兼容性已經(jīng)很高了。
總結(jié)
在這篇文章里,只是簡單的介紹如何使用CSS3 條件判斷@supports 以及JavaScript中的CSS.supports()來判斷瀏覽器是否支持這些最新的屬性。如果支持將返回的是一個(gè)true,將會(huì)渲染對(duì)應(yīng)的樣式;如果不支持,則將返回false,將不會(huì)渲染對(duì)應(yīng)的樣式。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: