CSS Feature: @supports

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.

Wie benutzt man @supports

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.