CSS | Conditional Rules - GeeksforGeeks

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>
Output:  
In the above example, the style gets applied when the URL specified is the one being visited.
Supported Browsers:
Google Chrome
Internet Explorer
Firefox
Opera
Safari 
ysachin2314
CSS-Properties
Picked
Web technologies
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
Differences between Functional Components and Class Components in React
Node.js fs.readFileSync() Method