Veit Schiele Communications

Veit Schiele Communications

Feature Queries

erstellt von Veit Schielezuletzt verändert: 19.03.2017 15:01 © Veit Schiele, 2017

Geltungsbereich

@supports-Regeln

Feature Queries werden auch @supports-Regeln genannt.

Mit @supports können Sie per CSS überprüfen, ob eine bestimmte Eigenschaft oder ein bestimmter Wert unterstützt wird. So werden z.B. die folgenden Anweisungen nur ausgeführt, wenn CSS-Grids vom Browser unterstützt werden:

@supports (display: grid) {
    …
}

oder allgemeiner:

@supports (CSS-Eigenschaft: Wert) {
    …
}

Die Anweisungen werden nur ausgeführt, wenn CSS-Grids vom Browser unterstützt werden. Wenn ein Browser jedoch eine Funktion fehlerhaft oder unvollständig implementiert hat, hilft die @supports- Regel nicht. Um zu überprüfen, ob sich bestimmte Browser erwartungsgemäß verhalten, schauen Sie sich bitte Test the Web Forward an.

Operatoren

Für Feature Queries stehen die Operatoren not, and und or zur Verfügung.

Modernizr

Seit Jahren verwenden Entwickler Modernizr, um dasselbe wie Feature-Queries zu erreichen – allerdings wird hierzu JavaScript benötigt. Feature-Queries haben jedoch den Vorteil, dass sie schneller, robuster und einfacher zu bedienen sind.

Ignorierte CSS-Regeln

In vielen Fällen sind jedoch Feature-Queries gar nicht erforderlich, da die Browser von sich aus Anweisungen ignorieren, die sie nicht unterstützen. So wird z.B. die folgende Anweisung bei Browsern, die border-radius nicht unterstützen, Internet Explorer 6, 7 und 8, zu einer rechteckigen Box führen:

pre {
  background: #eee;
  padding: 1em;
  border-radius: 1em;
}

Browser-Unterstützung

@supports wird seit Mitte 2013 von Firefox, Chrome und Opera unterstützt. Es funktioniert auch in jeder Version von Edge. Safari unterstützt es seit Herbst 2015. Feature-Abfragen werden jedoch in keiner Version von Internet Explorer, Opera Mini oder Blackberry Browser unterstützt, s.a. Can I use.

Verwendung in Javascripts

var supportsFlex = CSS.supports("display", "flex");

Beispiel

Feature-Queries werden jedoch bei folgendem Beispiel benötigt:

p::first-letter {
   -webkit-initial-letter: 3;
   initial-letter: 3;
   color: red;
}

In Browsern, die first-letter nicht unterstützen, wird die Darstellung jedoch scheußlich. Mit Feature-Queries lässt sich dies verhindern:

@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  p::first-letter {
     -webkit-initial-letter: 3;
     initial-letter: 3;
     color: red;
  }
}

Code-Organisation

Es liegt nun nahe, Feature-Queries zur Organisation Ihrer CSS-Anweisungen zu verwenden, z.B. um zwischen Browsern zu unterscheiden, die Viewport Height unterstützen:

@supports (height: 100vh) {
  …
}
@supports not (height: 100vh) {
  …
}

Dies führt jedoch nicht zum gewünschtem Ergebnis wenn der Browser zwar Viewport Height unterstützt, nicht jedoch Feature Queries. Stattdessen sollte der Code folgendermaßen organisiert werden:

/* Code für Browser, die Feature Queries nicht unterstützen */
…
@supports (display: grid) {
    /* Code für Browser, die sowohl Feature Queries wie auch
       die 'display: grid'-Anweisung unterstützen.
       Diese Anweisung überschreibt ggf. auch die vorhergehende Anweisung. */
}

also z.B.:

section {
  float: left;
}

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      float: none;
    }
}