@supports——关联一组嵌套的CSS语句

Html5知典

发布于 2019-11-26 17:00:57

7710

发布于 2019-11-26 17:00:57

文章被收录于专栏：Html5知典

用途

@supports CSS at-rule 关联了一组嵌套的CSS语句,这些语句被放置在一个CSS区块中,该区块以大括号分割, 还有一个由多个CSS声明检测组成的条件,它是一个键值组合, 由逻辑与,逻辑或,逻辑非组合而成. 这样的条件语句称为支持条件。

语法

@supports <supports_condition> { 
/* 特殊样式规则 */ 
}

值

值	描述
<supports_condition>	可以声明一条或者几个由不同的逻辑运算符相结合的声明（比如说，非（not），或（or），与（and）等）。而且还可以使用括号来确定其操作的优先级关系。

例子

基本方法

/*使用CSS的基本属性来进行检查：*/ 
@supports (display: flex) { 
    div { display: flex; } 
}

@supports可以使用not逻辑声明，主要作用是，在不支持新特性时，可以提供备用样式。换过来也可以理解，如果你的浏览器不支持@supports条件判断中的样式，你可以通过@supports为浏览器提供一种备用样式，如：

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

@supports的条件判断中也可以使用“and”逻辑声明。用来判断是否支持多个属性。反之，如果不同时支持这两个条件，那么浏览器将不会调用这部分样式。

/*使用CSS的基本属性来进行检查：*/ 
@supports (display: flex) { 
    div { display: flex; } 
}

基本方法

/*使用CSS的基本属性来进行检查：*/ 
@supports (display: flex) { 
    div { display: flex; } 
}

基本方法

/*使用CSS的基本属性来进行检查：*/ 
@supports (display: flex) { 
    div { display: flex; } 
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-01-02，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Html5知典微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度