CSS学习笔记：功能查询

通过 @support，你可以在 CSS 中使用一小段的测试来查看浏览器是否支持一个特定的 CSS 功能(这个功能可以是 CSS 的某种属性或者某个属性的某个值)，然后根据测试的结果来决定是否要应用某段样式。
比如：

@supports ( display: grid ) {
    // 如果浏览器支持 Grid，这里面的代码才会执行
}

如果浏览器能够理解 display: grid，那么，大括号里的代码都会被应用，否则，这些样式就会被跳过。

语法

@supports <supports_condition> {
  /* specific rules */
}

其中supports_condition表示支持条件。一个支持条件是由一个或者多个不同的逻辑操作符连接的表达式声明组合而成的。
使用小括号可以调整这些表达式之间的运算优先级.

声明语法

最简单的表达式就是一个CSS声明：

@supports ( height: 100vh ) {
    /*支持 viewport height 的样式*/
}

一个CSS声明总被包含在一组小括号中。

not操作符

not操作符可以放在任何表达式的前面来产生一个新的表达式,新的表达式为原表达式的值的否定。

@supports not ( height: 100vh ) {
    /*对于旧浏览器的替代样式*/
}

and操作符

and操作符用来将两个原始的表达式做逻辑与后生成一个新的表达式。

@support (display: table-cell) and (display: list-item){

}

or操作符

or操作符用来将两个原始的表达式做逻辑或后生成一个新的表达式

@support( transform-style: preserve ) or ( -moz-transform-style: preserve ){

}

使用

检测是否支持指定的CSS属性：

@supports (animation-name: test) {
    … /* 如果支持不带前缀的animation-name,则下面指定的CSS会生效 */
    @keyframes { 
    /* @supports是一个CSS条件组at-rule,它可以包含其他相关的at-rules */
      …
    }
}

检测是否支持指定的CSS属性或者其带前缀版本：

@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
    … /* 如果支持不带前缀以及带前缀的perspective属性,则下面指定的CSS会生效 */
}

检测是否不支持指定的CSS属性：

@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* 这里的CSS代码用来模拟text-align-last:justify */
}

看一下，浏览器支持率还是蛮高的~