CSS @supports-Regel – Abfrage nach Browser-Support

CSS-Direktiven – @-Regeln

Browser, die die aufgeführten Eigenschaft-Wert-Paare und ihre Kombinationen nicht unterstützen, ignorieren die Stile innerhalb der @supports-Regel.

Eine at-Regel weist CSS an, bestimmte Eigenschaften anzuwenden. Jede Direktive beginnt mit einem @ gefolgt von Schlüsselwörtern. Wir kennen at-Regeln wie @import, die am Anfang einer CSS sitzt und CSS anweist, eine externe CSS-Datei zu laden. Weitere at-Regeln sind @font-face, @keyframes, @media, @namespace und @page.

supports-Regel – Schreibweise

Statt die Unterstützung für CSS-Eigenschaften mit Javascript abzufragen oder auf Feature-Detection durch Polyfills – z.B. mit Hilfe von Modernizr – zurückzugreifen, verzweigt die @support-Regel in einen Block von Eigenschaften, wenn die Bedingungen zutreffen.

@supports ( display: grid ) {
 …
}

Andererseits kann die @support-Regel auch testen, ob der Browser eine Eigenschaft nicht unterstützt – den not-Operator kennen wir bereits aus den CSS-Selektoren und auch aus der @media-Regel.

@supports not ( display: grid ) {
 …	…	…
}

Der and-Operator testet, ob der Browser zwei Eigenschaften bereits implementiert hat.

@supports (flex-wrap: wrap) and (color: var(--me-color)) {
   .foo {
      background: wheat;
   }
}

Um Problemen mit der Reihenfolge der Regeln aus dem Weg zu gehen, dürfen and, or und not nur mit Klammern benutzt werden. Dabei um or, not und and immer ein Leerzeichen lassen!

CSS Regeln verschachteln

CSS-Regeln dürfen verschachtelt werden. Eine @supports-Regel darf also in einer @media-Regel sitzen und umgekehrt.

.foo {
    background: red;
}

@supports (flex-wrap: wrap) {
   @media (min-width: 42.5em) {
      .foo {
         background: blue;
      }
   }
}

Diese Kombination hätte z.B. IE 10 außen vor gelassen, denn IE 10 unterstützte zwar CSS flex, aber in einer alten Syntax -ms-flex-wrap : wrap.

Browser-Support für @ supports

Alle modernen Browser unterstützen die @supports-Regel, allerdings nicht IE bis einschließlich IE 11, der alte Bremsklotz des Webdesigns. Aber Browser, die @supports nicht unterstützen, ignorieren alles innerhalb der geschweiften Klammern. So tragen die CSS-Eigenschaften innerhalb der @supports-Regel zu Verbesserungen bei, ohne alte Browser zu gefährden.

Alte Browser bleiben bei einem alten Look, aber der Nutzung neuer Stile steht nichts im Wege.

Supports - Einschluss und Ausschluss

/** Positiv: ivory und orange für IE **/

.testrect { background: ivory; color: orange; }
.testrect p:after { content: " Ein alter IE 9, 10, 11!"; border-bottom: 1px solid red; }

/** Negativ: grün und weiß kein IE **/

@supports ( (--css: variables) ) {
    .testrect { background: green; color: white}
    .testrect p:after { content: " Kein IE 9, 10, 11!"; }
}

.iewrap { border: 4px solid gray; }
.iewrap p { color: gray; }
.iewrap p:before { content: "Alles Grau? Kein alter IE!"; }

@media screen and (min-width:0\0) { 
   .iewrap { border: 4px solid red}
   .iewrap p { color: red; text-align: center; }
   .iewrap p:before { content: "Nur Rot in IE 9, 10 und IE11: "; }
}

oder – bis einschließlich IE11, wird ab EDGE nicht mehr unterstützt: -ms-high-contrast

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   img[src*=".svg"] { width: 100%; }
}

Microsoft Edge

@supports (-ms-ime-align: auto) {
  .selector {
        color: red;
  }
}

Javascript CSS.supports

Die @supports-Regel hat ein Gegenstück in Javascript: CSS.supports ("Eigenschaft", Wert) gibt true zurück, wenn die CSS-Eigenschaft mit dem jeweiligen Wert unterstützt, ansonsten false.

const smoothscroll = CSS.supports ("scroll-behavior","smooth");
console.log ("smoothscroll " + smoothscroll);

IE11 unterstützt CSS.supports nicht.