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

Daming 2020-06-20
0条评论 419 次浏览
Daming 2020-06-200条评论 419 次浏览

使用 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()

1+

发表评论

电子邮件地址不会被公开。