The CSS @supports Rule
Use the @supports rule to ask the browser if it supports a specific CSS property or value. Fallback styles for an unsupported feature can be defined with it too.
As a result, styles only apply when the browser is able to handle them.
Basic Syntax
@supports (property: value) {
/* CSS rules to apply if condition is true */
}
Example: Using @supports with grid and flex
Fallback styling comes from pairing @supports with regular CSS.
Flex fallback
A browser that supports display: flex applies the CSS inside the @supports rule. Any other browser uses the .container class written outside it instead.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS @supports - Flex Fallback</title>
<style>
/* Fallback if the browser does not support display: flex */
.container {
float: left;
width: 100%;
}
/* Use this CSS if the browser supports display: flex */
@supports (display: flex) {
.container {
display: flex;
}
}
.container > div {
background-color: #2196F3;
color: white;
padding: 20px;
margin: 5px;
text-align: center;
flex: 1;
}
</style>
</head>
<body>
<h1>@supports with Flex Fallback</h1>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>
Grid fallback
Here the test is display: grid. When it passes, the CSS inside the @supports rule applies, and when it fails, the .container class outside that rule serves as a fallback.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS @supports - Grid Fallback</title>
<style>
/* Fallback if the browser does not support display: grid */
.container {
display: table;
width: 90%;
background-color: #2196F3;
padding: 10px;
}
/* Use this CSS if the browser supports display: grid */
@supports (display: grid) {
.container {
display: grid;
grid: auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
}
.container > div {
background-color: #ffffff;
color: #333;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>@supports with Grid Fallback</h1>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
Negating with not
To apply styles only when a feature is not supported, write not in the condition.
Example
@supports not (display: grid) {
.warning {
background-color: pink;
padding: 10px;
border: 1px solid red;
}
}
Combining Conditions
A single @supports rule can hold multiple conditions, joined with and, or, and not.
Note: Older browsers need fallback styles, so always provide them outside of @supports.
Example
@supports (display: grid) and (gap: 10px) {
.container {
display: grid;
gap: 10px;
}
}
CSS Reference
Whether a browser supports a CSS feature is tested with the @supports at-rule.