Mit dem @supports feature query ist es möglich CSS Deklarationen abhängig vom Browser Support zu definieren.
Wofür ist das nützlich?
Nicht alle Browser unterstützen alle Features. Hierdurch kann man eine Art Fallback schaffen, um sicherzustellen, dass das Layout nicht bricht.
@supports
Wie benutzt man Eigentlich genau wie media queries:
@supports (display: grid) {
.wrapper {
display: grid;
}
}
Wichtig zu erwähnen ist, dass @supports
außerdem not
, and
und or
versteht.
@supports not (display: grid) {
.wrapper {
float: left;
}
}
Hinweis zum Ende
Da @supports
nicht von allen Browsern unterstützt wird, sollte man die feature queries so definieren, dass der Browser diese auch verstehen kann.