@supports特性查询

特性查询也就是@supports规则，这个属性是作为CSS2.0扩展被引入的，是检测浏览器是否支持css属性值，是由逻辑与，逻辑或和逻辑非组合而成。主要的目的就是为了作者能够在不同的浏览器上根据不同的CSS支持程度来进行特性样式的编写。

1.基本用法

/*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的时候忽略

}

因为是谷歌浏览器，因此为了方便验证，实例如下

当判断为 -moz-column-gap:40px

当判断条件为 column-gap:40px

同时 @supports还支持表达式

/*逻辑与*/

@supports ((color:red) and (font-size:14px){

}

/*逻辑或*/

@supports ((color:red) or (font-size:14px)){

}

/*逻辑非*/

@supports (not color:red){

}

并且还支持组合表达的方式，在进行组合的时候将需要判断的条件使用括号括起来就可以进行正常的判断

@supports ((not (color:#fff) and (font-size:14px))or(background-color:#666)){}

巴特西

@supports特性查询

1.基本用法

最新文章

热门文章