css特性查询@supports及Window.CSS.supports()实践

使用 css特性查询（功能查询）主要是为了解决网页的兼容性问题，当用户浏览器不兼容某一特性时可以优雅降级。

在css中支持@supports标记、或者在js中使用css.supports函数，来检测浏览器是否支持css特性

兼容性方面 首先整理一下 关于渐进增强和优雅降级的理解

渐进增强

网页以基础信息显示优先，先提供基础版本，能走通功能，随后再针对现代浏览器进行优化。
适和内容为主的网站，比如电商 等

优雅降级

网页直接针对现代浏览器来设计制作，以呈现做好的效果，对于老旧浏览器 再单独优化 降级。
适合展示为主、客户群体的浏览器比较新的网站，例如:官网、H5

@supports标记 语法规则

@supports (rule)[operator (rule)]* { ... }

rule： 指定一条具体的css规则，必须使用括号包裹。
operator： 使用or | and | not等操作符指定多条规则。

例子：

浏览器支持flex

@supports ( display: flex ) {
    body {
        display: flex;
    }
    #main {
        flex: auto;
    }
}

浏览器不支持flex

@supports not ( display: flex ) {
    #main{
        float: left;    
    }
}

多条件检测：

@supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) { 
    /* use styles here */ 
}/

JavaScript中的css.supports函数

JavaScript里提供了Window.CSS.supports()方法，用来检查浏览器对css3属性是否支持，该函数提供2中调用方式：

第一种方法是使用两个参数：一个是属性名，另一个是属性值 。

var supportsFlex = CSS.supports("display", "flex");

第二种用法是：简单的提供整个需要分析的样式字串。

var  supportsFlex   = CSS.supports("(display: flex) and (-webkit-display: flex)");

CSS.supports函数返回的是一个布尔值，如果为true这代表支持该属性，当然在使用该函数之前，我们需要先判断浏览器是否支持CSS.supports，方法如下：

if(!!((window.CSS && window.CSS.supports) || window.supportsCSS || false)){
    //支持
}

兼容性问题

在ie11以上 才支持
https://www.caniuse.com/#search=%40supports
https://www.caniuse.com/#search=supports()