CSS Conditional Rules

Last Updated : 04 Jan, 2025

CSS Conditional Rules apply CSS styles only when certain conditions are met. So the condition here can be either true or false and based on the statements/style will get executed. These rules start with the @ symbol and are part of CSS at-rules.

The main conditional rules include:

1. CSS Supports Rule

The @supports rule in CSS allows you to apply styles only if the browser supports a specific CSS property or feature.

Syntax:

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

html

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        @supports (display: grid) {
            section h1 {
                background-color: green;
                color: white;
                padding: 15px;
            }
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <section>
        <h1>GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
    </section>
</body>
</html>
<!--Driver Code Ends-->

The @supports rule checks if the browser supports the display: grid property.
If supported, it applies the specified styles to the <h1> element within the <section>, changing its background color to green, text color to white, and adding padding.

2. CSS Media Rule

The @media rule in CSS applies styles based on media queries, allowing for responsive design that adapts to different devices and screen sizes.

Syntax:

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

html

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        @media screen and (max-width: 700px) {
            section {
                background-color: green;
                color: white;
                padding: 15px;
            }
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <section>
        <h1>GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
    </section>
</body>
</html>
<!--Driver Code Ends-->

The @media rule checks if the device's screen width is 700 pixels or less.
If this condition is met, it applies the specified styles to the <section> element, changing its background color to green, text color to white, and adding padding.

3. CSS Document Rule

The @document rule in CSS is designed to apply styles to specific URLs or sets of URLs. However, it is currently experimental and primarily supported only in Firefox with the -moz- prefix. As a result, it is not recommended for cross-browser use.

Syntax:

@-moz-document url("YOUR-URL") {
   /* Style to apply */
}

html

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        @-moz-document url("http://localhost/GfG/document-rule.html") {
            section h1 {
                background-color: green;
                color: #fff;
                padding: 15px;
            }
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <section>
        <h1>GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
    </section>
</body>
</html>

<!--Driver Code Ends-->

The @-moz-document rule targets the specific URL "http://localhost/GfG/document-rule.html".
Within this URL, it applies styles to the <h1> element inside the <section>, setting a green background, white text color, and padding.

Note: The @document rule is not widely supported across browsers; currently, it is primarily implemented in Firefox using the @-moz-document prefix

Best Practices for Using CSS Conditional Rules

Use the @supports rule to apply styles only if the browser supports specific CSS features, ensuring fallback for unsupported browsers.
Leverage the @media rule for responsive design, targeting specific screen sizes or device characteristics.
Avoid over-reliance on experimental rules like @document, as they lack cross-browser support.

CSS Conditional Rules

aakashpawar1999

Improve

Article Tags :

CSS Conditional Rules

1. CSS Supports Rule

2. CSS Media Rule

3. CSS Document Rule

Best Practices for Using CSS Conditional Rules

Similar Reads

Thank You!

What kind of Experience do you want to share?