Flash cards
Review the key moves
What is the main idea behind CSS @supports Rule?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
@___ (property: value) {Put the learning moves in the order that makes the concept easiest to apply.
The CSS @supports Rule
The @supports rule lets you check if the browser supports a specific CSS property or value, and to define fallback styles if the feature is not supported.
This is useful for applying styles only when the browser can handle them.
Basic Syntax
@supports (property: value) {
/* CSS rules to apply if condition is true */
}Example: Using @supports with grid and flex
You can combine @supports with regular CSS to provide fallback styling.
Here, if the browser supports display: flex, the CSS inside the @supports rule will be applied. If not, the .container class outside the @supports rule will be applied:
Example
/* use this CSS 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;
}
}Live preview
Here, if the browser supports display: grid, the CSS inside the @supports rule will be applied. If not, the .container class outside the @supports rule will be applied:
Example
/* use this CSS 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;
}
}Live preview
Negating with not
You can use not to apply styles only when a feature is not supported:
Example
@supports not (display: grid) {
.warning {
background-color: pink;
padding: 10px;
border: 1px solid red;
}
}Combining Conditions
You can use and , or , and not for multiple conditions:
Example
@supports (display: grid) and (gap: 10px) {
.container {
display: grid;
gap: 10px;
}
}Note
Always provide fallback styles outside of @supports , for older browsers.