Loading lesson path
Concept visual
Start at both ends
The CSS @supports Rule
@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.
@supports (property: value) {/* CSS rules to apply if condition is true */
}Example: Using @supports with grid and flex
@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:
/* 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;
}
}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:
/* use this CSS if the browser does not support display: grid */.container
{
display: table;
width: 90%;Formula
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;
}
}You can use not to apply styles only when a feature is not supported:
@supports not (display: grid) {.warning {
background-color: pink;
padding: 10px;
border: 1px solid red;
}
}You can use and, or, and not for multiple conditions:
@supports (display: grid) and (gap: 10px) {.container {
display: grid;
gap: 10px;
}
}@supports, for older browsers.
@supports Used to test whether a browser supports a CSS feature