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 which 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 that are to be tested. So the first statement is like an if statement which we say like that if that property is supported then do everything inside the Style element. Even Logical Operators can be used with Parenthesis to make clear. There are different types of value pair.
Refer a 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 supports system using AND, OR. These rules can be nested which makes code easier while using complex queries. Ideally, Browser support for CSS3 version is variable to have a 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 the JavaScript is disabled. Thereby when we write code, they are very well familiar to a media query.
Let’s see their working with Operators.
1. NOT Keyword
Just like checking browser supporting we can also check if the feature is supported or not using the operator NOT.
The sample looks like this:
@supports not (display: flex)
{
.aaa {
Display: grid;
}
}When a NOT is combined with other operators it is not necessary to enclose the NOT keyword between two parentheses such that parenthesis is mandatory when it is the first condition.
Let’s take an example like:
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 the conditions are evaluated to 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, OR together for testing the conditions.
Examples of CSS.supports()
Given below are the 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 for 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 is 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 colour 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
To the end, in this article, we have seen how to create a support function in CSS. Therefore, we conclude that about CSS is it is 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 a great addition to CSS Specification. Depends on the projects we will start to use this rule more and good.
Recommended Articles
This is a guide to CSS.supports(). Here we discuss the introduction to CSS.supports(), how does this function works along with respective examples. You may also have a look at the following articles to learn more –
