CSS | Conditional Rules

Last Updated : 02 Jul, 2021

CSS Conditional Rules are nothing but a feature of CSS in which the CSS style is applied based on a specific condition. So the condition here can be either true or false and based on the statements/style will get executed.
These rules eventually come under CSS at-rule as they start with an @.
The Conditional Rules are:

@supports
@media
@document

@supports: The @supports conditional rule is to check the support of a specific CSS property on the browser and apply the styling based on that.
Syntax:

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

Example:

html

<!DOCTYPE html>
<html>
<head>
    <title>Supports Rule</title>
    <style>        
        @supports (display: grid) {
            section h1 {
                background-color: green;
                color: white;
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <section>
        <h1>GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
    </section>
</body>
</html>

Output:

In the above example, the browser is supported by the display property as a grid.
@media: The @media conditional rule is a rule which is used to apply the style based on the media queries. It can be used to check the device width and/or height and apply the style specified based on that.
Syntax:

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

Example:

html

<!DOCTYPE html>
<html>
<head>
    <title>Media Rule</title>
    <style>
        @media screen and (max-width: 700px) {
            section {
                background-color: green;
                color: white;
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <section>
        <h1>GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
    </section>
</body>
</html>

Output:
Screen width more then 700px:

Screen width less then or equal to 700px:

In the above example, when the width of the browser more then 700px, the style is not applied but when the browser window is made smaller than 700px, then the style gets applied.
@document: The @document conditional rule is used to apply style for specified URL i.e. the styling will only be applied on the specified URL.
Syntax:

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

It is experimental and works only on Firefox with -moz- prefix i.e. @-moz-document.
Example:

html

<!DOCTYPE html>
<html>
<head>
    <title>Document Rule</title>
    <style>
        @-moz-document url("http://localhost/GfG/document-rule.html") {
            section h1 {
                background-color: green;
                color: #fff;
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <section>
        <h1>GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
    </section>
</body>
</html>