CSS | @supports 规则

CSS @supports 规则指定了浏览器功能支持的支持条件，即可以指定特定的 CSS 样式属性作为检查其在浏览器上的支持的条件，如果条件为真，则执行其他代码块不是。它是一个CSS 条件规则，属于CSS at-rule 。

句法：

@supports (condition) {
    //  Style you want to apply
}

例子：

    
    


    

        
GeeksforGeeks
    

输出：

在上面的示例中，浏览器支持显示 flex，因此应用了样式。
有 3 个关键字可以与 @supports 一起使用。这些都是：

不是

和

或者

not 关键字： ‘ not ‘ 关键字可用于检查条件指定的相反情况。
为了解释该关键字，下面是一个示例，如果不支持显示为 flex，则应用样式。

例子：

    
    


    

        
GeeksforGeeks
    

输出：

在上面的例子中，没有应用样式，因为浏览器支持显示为 flex。

and 关键字： ‘ and ‘ 关键字用于检查两个条件，如果两者都为真，则执行样式块。

例子：

    
    


    

        
GeeksforGeeks
    

输出：

or 关键字：当我们想要在指定的多个条件之一为真时执行样式块时，使用 ‘或 ‘ 关键字。

例子：

    
    


    

        
GeeksforGeeks
    

输出：

支持的浏览器： CSS @supports 规则属性支持的浏览器如下：

• 谷歌浏览器
• 微软边缘
• 火狐
• 苹果浏览器
• 歌剧