CSS Feature Queries mittels @supports

27.11.2014, 17:34 von Daniel || 0 Kommentare || Mit anderen teilen

@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

Chrome Firefox Internet Explorer Opera Safari
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.

Schlüsselwörter zu diesem Beitrag

« zurück

Hier schreibe ich,

Ich

Daniel Erlinger, als selbstständiger Webdesigner über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Vernetzt

Twitter
Mister Wong
Contao Community

Kommentare



Nutze Deinen Gravatar.


Bitte addieren Sie 3 und 1.