@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)很高了。
總結
在這篇文章里,只是簡單的介紹如何使用CSS3 條件判斷@supports 以及JavaScript中的CSS.supports()來判斷瀏覽器是否支持這些最新的屬性。如果支持將返回的是一個true,將會渲染對應的樣式;如果不支持,則將返回false,將不會渲染對應的樣式。
更多建議: