CSS, HTML und Javascript mit {stil}

CSS @supports-Regel

CSS @-Regeln (at-Regeln) beginnen mit einem @-Zeichen.

Die @supports-Regel testet, ob der Browser eine CSS-Eigenschaft unterstützt – ähnlich wie eine @media-Regel die Auflösung oder Orientierung des Monitors abfragt.

Browser, die @supports nicht unterstützen, ignorieren die Stile innerhalb der @supports-Regel.

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

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

@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.

@support not ( display: grid ) {

}

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

@supports (flex-wrap: wrap) and (color: var(--me-fineColor)) {
   .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;
      }
   }
}

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 ihrer Nutzung steht nichts im Wege.

{ } @supports