CSS @supports-Regel – Abfrage nach Browser-Support

CSS @ supports : Stile je nach Browser-Unterstützung

Die @supports-Regel testet, ob der Browser Kombinationen von Eigenschaft und Wert unterstützt – z.B. display : grid oder object-fit: cover. Die Eigenschaft : Wert-Paare können durch and, or oder not verknüpft werden – ähnlich wie bei der @media-Regel.

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 implementier hat.

@supports (flex-wrap: wrap) and (color: var(--me-deepblue)) {
   .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 läßt z.B. IE 10 außen vor, denn IE 10 unterstützt 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. 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

Wer kommt hier vorbei?

/** 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; }

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

Internet Explorer 9, 10 and 11 via CSS ansprechen

.iewrap { border: 4px solid green; }
.iewrap p { color: green ; }
.iewrap p:before { content: "Alles Grün? 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;
  }
}
@supports @supports @supports