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.

if/else condition in CSS

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