CSS Feature Queries mittels @supports
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.