That is @supports rule query features, this property is introduced as an extension CSS2.0, it is to detect whether the browser supports css attribute value, and a non-combined by the logic, and logic or a logic together. The main purpose is to be able to write the characteristics of styles depending on the level of support for CSS in different browsers.
1. Basic Usage
/*html部分*/
/* <div class="box"><div> */
/*css部分*/
.box{
width:200px;
height:200px;
margin:30px auto;
background-color:red;
}
@supports (filter:blur(10px)){
.box{
background-color:green;
}
}
/*用法*/
@supports (写入需要进行判断的css属性，为bool值)){
为true的时候执行，为false的时候忽略
}Because Google browser, so in order to facilitate verification, the following examples
When it is determined -moz-column-gap: 40px
When the judgment condition is column-gap: 40px
Meanwhile @supports also supports expression
/*逻辑与*/
@supports ((color:red) and (font-size:14px){
}
/*逻辑或*/
@supports ((color:red) or (font-size:14px)){
}
/*逻辑非*/
@supports (not color:red){
}And also supports the expression of a combination embodiment, when performing composition determination will require the use of brackets conditions can be judged normal
@supports ((not (color:#fff) and (font-size:14px))or(background-color:#666)){}