Updated June 12, 2023
Introduction to CSS.supports()
The following article provides an outline for CSS.supports(). CSS @supports is defined as a support condition, also known as Feature Query, that helps to check browser support for CSS Property value and is a part of CSS3 Conditional Rules Specification used in the design work process. The condition we test should be placed inside the parenthesis; the valid code would be like if we try to use more parenthesis. The operator AND, OR helps to chain the detection of different features.
Syntax of CSS.supports()
The CSS supports syntax is given as:
@supports (condition)
{
.ex
{
// CSS Style
}
}Here the condition is a few sets of properties with values to be tested. So the first statement is like an if statement, in which we say that if that property is supported, then do everything inside the Style element. Even Logical Operators can be used with Parenthesis to make it clear. There are different types of value pair.
Refer to the below table for the value which is defined.
| S.No | Value | Description |
| 1 | AND | Value pair combine with conjunction |
| 2 | OR | It’s a disjunction |
| 3 | NOT | It’s a negation |
How CSS supports() Function works?
CSS support function returns a Boolean value (writing a conditional statement) specifying whether a browser supports CSS features or not. We can also perform multiple checks on the support system using AND, OR. These rules can be nested, which makes code easier while using complex queries. Ideally, Browser support for the CSS3 version is variable to have good practice on it. The detection is performed using JavaScript. To make this done with CSS Style @support function has been come in.
So, this function works well for detection even though JavaScript is disabled. Thereby when we write code, they are very well familiar with a media query.
Let’s see their working with Operators.
1. NOT Keyword
Just like checking browser support, we can also check whether the feature is supported using the operator NOT.
The sample looks like this:
@supports not (display: flex)
{
.aaa {
Display: grid;
}
}When a NOT is combined with other operators, enclosing the NOT keyword between two parentheses is unnecessary, such that parenthesis is mandatory when it is the first condition.
Let’s take an example:
VALID NOT
@supports not (display: flex) and ((display: grid) or (display: table))
{
}INVALID NOT
@supports
display: flex) or (display: table) not (display: table) {
}2. AND Keyword
This is used to check two conditions, and if both conditions are evaluated to be true, then the style statement is executed. In other terms, they are helpful for multiple required conditions.
3. OR Keyword
Disjunction type and used for multiple alternative styles. We can also use AND and OR together for testing the conditions.
Examples of CSS.supports()
Given below are examples of CSS.supports(). Below are the different scenarios where support is implemented.
Example #1
Showing NOT operator
Code:
<!DOCTYPE html>
<html>
<head>
<title>Supports Demo</title>
<style>
* {
box-sizing: border-box;
font-family: Algeria, sans-serif;
}
.main {
max-width: 80%;
height: auto;
background-color: #084F66;
margin: 0 auto;
padding: 0;
}
.city {
margin: 0;
padding: 0;
background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64));
}
img {
display: inline;
width: 90%;
height: auto;
}
@supports(mix-blend-mode: saturation) {
.city img {
mix-blend-mode: overlay;
}
}
@supports not (mix-blend-mode: saturation) {
.city img {
opacity: 0.7;
}
}
.aa {
text-align: center;
padding-top: 52px;
font-size: 10px;
}
</style>
</head>
<body>
<h1> @Supports examples </h1>
<div class="main">
<article class="city">
<img src="https://image.shutterstock.com/image-photo/scenic-summer-sunset-view-nyhavn-260nw-787660261.jpg" alt="denmark">
</article>
</div>
<p class="aa">Demo by Sunitha Eswaraiah. <a href="https://www.educba.com/css-layout/?source=leftnav" target="_blank">Read the content</a>.</p>
</body>
</html>Output:
Example #2
Implementation with AND Operator
Code:
<!DOCTYPE html>
<html>
<head>
<title>Supports Example using AND Keyword</title>
<style>
@supports (display: grid) and (display: -webkit-flex) {
div h1 {
display: -moz-flex;
justify-content: -moz-flex-start;
color: purple;
border: 6px solid purple;
padding: 18px;
font-size: 30px;
}
}
</style>
</head>
<body>
<div>
<h1> Styling Example </h1>
</div>
</body>
</html>Output:
Example #3
Using AND operator in support of border Style
Code:
<!DOCTYPE html>
<html>
<head>
<title>Supports rule using AND </title>
<style>
@supports (border-radius: 4px) and (box-shadow: 2px 2px 3px blue) {
div h1 {
border-radius:4px;
box-shadow: 2px 2px 3px blue
justify-content: flex-start;
color: red;
border: 6px solid yellow;
padding: 15px;
font-size: 30px;
}
}
</style>
</head>
<body>
<div>
<h1>@support rule in CSS</h1>
</div>
</body>
</html>Above code talks about testing Multiple properties. Here we have tested border-radius and shadow. Therefore it returns true if all of them are met.
Output:
Example #4
Support with CSS variables
Code:
<!DOCTYPE html>
<html>
<head>
<style>
section {
color: green;
}
@supports(--css: variables) {
section {
--my-color: red;
color: var(--my-color, 'pink');
}
}
h1 {
text-align: center;
max-width: 500px;
margin: 40px auto;
}
</style>
</head>
<body>
<section> <h1>If the text is supported by the browser. It is displayed in Red color. If not it is displayed as green</h1></section>
</body>
</html>The above code selects the section part to display the text content with a color in the browser.
Output:
Example #5
Using OR @supports function
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@Supports CSS with all value</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styl.css" />
<style>
@supports (display:grid) and (transform:rotate(20deg)){
p{
font-size: 2rem;
color: orange;
}
}
@supports (not (display:rainbow)) or (display:block){
p{
font-size: 3rem;
text-shadow: 4px 4px 4px blue;
}
}
</style>
</head>
<body>
<header>
<h1> <center>@Supports CSS Demo</center></h1>
</header>
<styl>
<p>If you're trying to achieve a goal, there will be roadblocked. I have had them; everybody has had them personally. But obstacles don't have to stop you. If you run into a barrier, don't turn around and give up the goal. Clear out how to climb it, go through it, or work around it.</p>
</styl>
<script>
</script>
</body>
</html>Output:
Conclusion
In this article, we have seen how to create a support function in CSS. Therefore, we conclude that CSS is a pretty good innovation. If something is not supported in the web browser, the nature of CSS is, it will simply ignore the page. Also, we have seen how to use the operators in the support system. @support function is an excellent addition to CSS Specification. Depending on the projects, we will use this rule more and better.
Recommended Articles
We hope that this EDUCBA information on “CSS.supports()” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
