9.6.2021 |

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.

Zur Übersicht

Mehr vom Devsquad...

sepideh adelpour

Aframe (3D Room)

Jan Sauer

Large file in Git with Git LFS

Wir freuen uns, Sie kennen zu lernen

Hat Sie unser Angebot überzeugt? Dann freuen wir uns, Sie kennen zu lernen. Kontaktieren Sie uns gerne für ein unverbindliches Erstgespräch.
newcubator GmbH
Freie-Vogel-Straße 369
44269 Dortmund
dortmund@newcubator.com
+49 231/586 873 80
newcubator GmbH
Bödekerstraße 22
30161 Hannover
hannover@newcubator.com
+49 511/957 313 00