CSS @supports-Regel

CSS @ supports Regel setzt Eigenschaft ein, je nachdem, ob der Browser eine Eigenschaft unterstützt oder nicht

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

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.

Kein Support für @support

Browser, die @supports nicht unterstützen (IE11), werden die CSS-Stile innerhalb der Support-Regeln nicht ignorieren. Es kann also zu vier Situationen kommen:

@supports (object-fit:cover) {
	img { 
		width: 120px; 
		height: 120px; 
		object-fit: cover; 
		border: 4px solid blue
	}
}

Kein @supports

@supports

Eigenschaft supported
Kein Support für @supports Support für border-color
Support für @supports Support für border-color
Eigenschaft nicht supported
Kein Support für @supports kein Support für object-fit
Support für @supports Support für object-fit

Dabei ist der erste Fall die dumme Situation, dass der Browser die @ supports -Regel nicht unterstützt, wohl aber die aufgeführten CSS-Eigenschaften. Dafür gibt es keine allgemein gültiges Vorgehen.

{ } @supports