CSS | @supports Rule
Last Updated :
23 Aug, 2022
The CSS @supports rule specifies a support condition for feature support on a browser, i.e. a specific CSS style property can be specified as a condition to check for its support on the browser and if the condition is true then the block of code is executed else not. It is a CSS conditional rule and comes under CSS at-rule.
Syntax:
@supports (condition) {
// Style you want to apply
}
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>Supports</title>
<style>
@supports (display: flex) {
div h1 {
display: flex;
justify-content: flex-start;
color: green;
border: 3px solid green;
padding: 20px;
font-size: 40px;
}
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
|
Output:
In the above example, the display flex is supported by browsers, so the styling is applied. There are 3 keywords that can be used with @supports. These are:
not keyword: The ‘not’ keyword can be used to check the opposite of the condition specifies. To explain that keyword, below is an example to apply the styling if there is no support for display being flex.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>Supports</title>
<style>
@supports not (display: flex) {
div h1 {
display: flex;
justify-content: flex-start;
color: green;
border: 3px solid green;
padding: 20px;
font-size: 40px;
}
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
|
Output:
In the above example, the styling is not applied because the browser supports display as flex. and keyword: The ‘and’ keyword is used to check two conditions and if both are true then the block of style is executed.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>Supports</title>
<style>
@supports (display: flex) and (display: -webkit-flex) {
div h1 {
display: flex;
justify-content: flex-start;
color: green;
border: 8px solid green;
padding: 20px;
font-size: 35px;
}
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
|
Output:
or keyword: The ‘or’ keyword is used when we want to execute the block of style when even one of the multiple conditions specified is true.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>Supports</title>
<style>
@supports (display: flex) or (display: -webkit-flex) {
div h1 {
display: flex;
justify-content: flex-start;
color: green;
border: 8px solid green;
padding: 20px;
font-size: 35px;
}
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
|
Output:
Supported Browsers: The browsers supported by CSS @supports rule property are listed below:
- Google Chrome 28 and above
- Microsoft Edge 12 and above
- Firefox 22 and above
- Safari 9 and above
- Opera 12.1 and above
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...