@supports ist eine Technik, die bisher völlig an mir vorbei gegangen ist. Leider. Denn diese Art der Feature Detection macht JavaScript überflüssig, wenn man "nur" die Verfügbarkeit einzelner CSS-Regeln prüfen will.

Die Funktionsweise von CSS @supports

Wie @supports funktioniert, ist recht einfach. Ähnlich der Syntax von Media Queries wird die Unterstützung für eine oder mehrere CSS-Regeln, bestehend aus Eigenschaft und Wert, überprüft. Ein simples Beispiel sieht so aus:

@supports (box-sizing:content-box) {
  .meinContainer {
    box-sizing:content-box;
  }
}

Abgefragt wird der Support einer Regel oder eines Wertes, innerhalb derer man sein CSS schreibt. Wie im Beispiel zu sehen ist, erfolgt die Prüfung des Wertes über ein Schlüsselwort (content-box). Der Wert kann aber genauso eine Maßeinheit sein:

@supports (transform-origin:5% 5%) {
  /* CSS */
}

Einschränkungen in Bezug auf CSS-Regeln gibt es keine. Ganz im Gegenteil. So können beispielsweise auch mehrere Abfragen über AND oder OR miteinander verknüpft werden:

@supports (transform-style:preserve) or (-moz-transform-style:preserve) {
  /* CSS */
}

Eine negative Abfrage mit not

Genauso wie es möglich ist, den Support einer CSS-Regel abzufragen, so ist es ebenfalls möglich, eine fehlende Browserunterstützung abzufragen.

@supports not (width:calc(25% - 2em)) {
  .meinElement {
    display:table-cell;
  }
}

Browserunterstützung

ja, seit 28	ja, seit 22	nein	ja, seit 12.1	nein

Quelle: caniuse.com

Aufgrund der noch mangelnden Browserunterstützung stellt sich hier die Sinnfrage. Kann ich dieses Feature nutzen, um auf JavaScript zu verzichten? Oder sollte ich doch lieber auf Feature Detection a la modernizr setzen? Ich denke, es kommt drauf an.