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
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
JavaScript - Conditional Statements JavaScript conditional statements allow you to execute specific blocks of code based on conditions. If the condition is met, a particular block of code will run; otherwise, another block of code will execute based on the condition.Types of Conditional Statements if statementif...else statementif...e
5 min read
How to conditionally apply CSS styles in AngularJS ? In AngularJS we can build the dynamic single-page application with interactive CSS embedded in it. But as usual, while developing the application, the CSS is once statically defined and used, we are not changing the CSS when the application is running. But, in AngularJS we can dynamically change the
5 min read