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, alte 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.
Conditional Comments und Browser-Präfix – aus und vorbei
Bedingte Kommentare (<!--[if IE]> … <![endif]-->) sind eine tote Technik, weil sie nur bis IE Version 9 interpretiert wurden.
Auch der Browser-Präfix wird heute praktisch kaum noch genutzt. Die immergrünen Browser – das sind Chrome, Edge, Firefox, Opera und Safari – sind heute nahezu auf demselben Stand und der Browser-Präfix verliert an Bedeutung. Die letzten kleinen Ecken sind z.B.
input[type='range']::-webkit-slider-thumb input[type=range]::-moz-range-thumb -webkit-line-clamp -webkit-text-stroke -webkit-text-fill -webkit-print-color-adjust -moz-font-feature-settings: "frac"; -webkit-font-feature-settings: "frac"; -webkit-scrollbar -webkit-scrollbar-thumb -webkit-scrollbar-track
Die Liste erhebt keinen Anspruch auf Vollständigkeit, aber sie ist 2025 auf jeden Fall kurz geworden. CSS Transitions und Keyframe-Animationen sind schon lange Präfix-frei, appearance: none, position: sticky gehörten zu den letzten, die in den offiziellen Support gerutscht sind.
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.
