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.
Similar Reads
if/else condition in CSS In CSS, traditional if/else conditions aren't directly available. Instead, conditional styling is managed through techniques like media queries, which apply styles based on screen size, and feature queries (@supports), which check for browser support of specific CSS features, allowing adaptable and
3 min read
if/else condition in CSS In CSS, traditional if/else conditions aren't directly available. Instead, conditional styling is managed through techniques like media queries, which apply styles based on screen size, and feature queries (@supports), which check for browser support of specific CSS features, allowing adaptable and
3 min read
if/else condition in CSS In CSS, traditional if/else conditions aren't directly available. Instead, conditional styling is managed through techniques like media queries, which apply styles based on screen size, and feature queries (@supports), which check for browser support of specific CSS features, allowing adaptable and
3 min read
How to load css resources conditionally ? In the world of web development, CSS plays a crucial role in styling HTML code. Typically, the CSS code is linked in the head tag of an HTML document, allowing developers to easily apply styles to the content of a web page. However, there may be times when the desired styling is dependent on specifi
6 min read
CSS At-Rules Sass supports every at-rule that is a part of the proper CSS. In order to stay flexible and future-compatible with the upcoming versions of CSS, Sass has given general support that covers almost every at-rules by itself. Syntax: css @<rule> <value>, @<rule> { ... } OR css @<rule
2 min read
CSS At-Rules Sass supports every at-rule that is a part of the proper CSS. In order to stay flexible and future-compatible with the upcoming versions of CSS, Sass has given general support that covers almost every at-rules by itself. Syntax: css @<rule> <value>, @<rule> { ... } OR css @<rule
2 min read