CSS |条件规则

CSS 条件规则只不过是 CSS 的一项功能，其中基于特定条件应用 CSS 样式。所以这里的条件可以是真或假，并且根据语句/样式将被执行。
这些规则最终归于CSS at-rule ，因为它们以@开头。
有条件的规则是：

• @支持
• @媒体
• @文档

@supports： @supports 条件规则是检查浏览器上特定 CSS 属性的支持，并在此基础上应用样式。
句法：

@supports ("condition") {
   /*  Style to apply  */
}

例子：

html

    
    


    

        
GeeksforGeeks
        
A computer science portal for geeks
    

输出：

在上面的示例中，显示属性支持浏览器作为网格。
@media： @media 条件规则是用于根据媒体查询应用样式的规则。它可用于检查设备的宽度和/或高度并应用基于此指定的样式。
句法：

@media screen and ("condition") {
   /*  Style to apply  */
}

例子：

html

    
    


    

        
GeeksforGeeks
        
A computer science portal for geeks
    

输出：
屏幕宽度超过 700 像素：

屏幕宽度小于或等于 700px：

在上面的示例中，当浏览器的宽度超过 700px 时，不应用样式，但当浏览器窗口小于 700px 时，则应用样式。
@document： @document 条件规则用于为指定的 URL 应用样式，即样式将仅应用于指定的 URL。
句法：

@document url(“YOUR-URL”) {
   /*  Style to apply  */
}

它是实验性的，仅适用于带有-moz-前缀的 Firefox，即@-moz-document 。
例子：

html

    
    


    

        
GeeksforGeeks
        
A computer science portal for geeks
    

输出：

在上面的示例中，当指定的 URL 是被访问的 URL 时，将应用样式。

支持的浏览器：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器