CSS.supports() — Methode · JavaScript-Referenz

Signatur

CSS.supports(property, value) | CSS.supports(conditionText)

Beschreibung

Die statische Methode CSS.supports() ist das JavaScript-Gegenstück zur CSS-Regel @supports. Damit lässt sich zur Laufzeit feststellen, ob der Browser ein CSS-Feature kennt, etwa display: grid, backdrop-filter oder Container-Queries. Man nutzt sie für Feature-Detection statt fehleranfälliger User-Agent-Abfragen.

Die Methode gibt es in zwei Formen:

Zwei Argumente: CSS.supports("display", "grid") prüft genau ein Paar aus Eigenschaft und Wert.
Ein Argument: CSS.supports("(display: grid) and (gap: 1rem)") nimmt eine vollständige Bedingung in der Syntax von @supports an, einschließlich and, or, not und selector(...).

Das ist praktisch, wenn JavaScript je nach Unterstützung eine andere Lösung wählen soll, etwa ein Polyfill nachladen, eine CSS-Klasse am <html>-Element setzen oder statt einer CSS-Animation eine JS-Animation verwenden. Reine Styling-Weichen gehören dagegen besser direkt in @supports ins Stylesheet.

Die Methode prüft nur, ob der Browser die Syntax versteht. Ob das Feature korrekt oder vollständig umgesetzt ist, sagt sie nicht.

Parameter

Name	Typ	Beschreibung
$property Pflicht	string	Name der CSS-Eigenschaft, z. B. `"display"` oder `"--my-var"` (Custom Properties). Wird die Methode nur mit einem Argument aufgerufen, ist dies stattdessen `conditionText`.
$value	string	Wert, der für `property` geprüft wird, z. B. `"grid"`. Ohne `!important` angeben.
$conditionText	string	Alternative Ein-Argument-Form: eine Bedingung in `@supports`-Syntax, z. B. `"(display: flex) and (not (display: inline-grid))"` oder `"selector(:has(a))"`.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Browser die Eigenschaft mit dem Wert bzw. die Bedingung unterstützt, sonst false. Ungültige Syntax führt zu false und nicht zu einer Exception.

Beispiele

Eigenschaft und Wert prüfen (zwei Argumente)

const hasGrid = CSS.supports('display', 'grid');
const hasSubgrid = CSS.supports('grid-template-columns', 'subgrid');
const hasFoo = CSS.supports('display', 'foo');

console.log(hasGrid, hasSubgrid, hasFoo);

true true false // je nach Browser

Bedingung in @supports-Syntax (ein Argument)

// Logische Verknüpfungen und Selektor-Prüfung
const modernLayout = CSS.supports('(display: grid) and (gap: 1rem)');
const hasHas = CSS.supports('selector(:has(> img))');
const noBackdrop = CSS.supports('not (backdrop-filter: blur(4px))');

console.log({ modernLayout, hasHas, noBackdrop });

{ modernLayout: true, hasHas: true, noBackdrop: false }

Feature-Klassen am <html>-Element setzen

const features = {
  'container-queries': 'container-type: inline-size',
  'has-selector': 'selector(:has(*))',
  'backdrop': '(backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))'
};

const root = document.documentElement;
for (const [name, condition] of Object.entries(features)) {
  // Einzelne Deklarationen brauchen Klammern
  const test = condition.includes(':') && !condition.startsWith('(') && !condition.startsWith('selector')
    ? `(${condition})`
    : condition;
  root.classList.toggle(`supports-${name}`, CSS.supports(test));
  root.classList.toggle(`no-${name}`, !CSS.supports(test));
}

console.log(root.className);

supports-container-queries supports-has-selector supports-backdrop

Polyfill nur bei Bedarf nachladen

const loadAnchorPolyfill = async () => {
  if (CSS.supports('anchor-name', '--tooltip')) {
    console.log('Native Anchor Positioning wird genutzt');
    return;
  }
  const { default: polyfill } = await import('https://unpkg.com/@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js');
  await polyfill();
  console.log('Polyfill aktiv');
};

loadAnchorPolyfill();

Native Anchor Positioning wird genutzt // oder: Polyfill aktiv

// Wichtig · Fallstricke

Klammern in der Ein-Argument-Form: In der Spezifikation muss eine einzelne Deklaration in Klammern stehen, also CSS.supports("(display: grid)"). Moderne Browser akzeptieren zwar auch "display: grid" ohne Klammern, das ist aber nur ein Kompatibilitäts-Zugeständnis. Setze die Klammern immer.
Kein !important und kein Semikolon: CSS.supports("color", "red !important") und "(color: red;)" ergeben false.
Nur Syntax, keine Qualität: true heißt nur, dass der Parser die Angabe versteht. Fehlerhafte oder unvollständige Umsetzungen (z. B. bei position: sticky in Tabellen) werden nicht erkannt.
Präfixe: Herstellerpräfixe wie -webkit-backdrop-filter muss man selbst prüfen, am besten per or.
Custom Properties (--x) liefern fast immer true, weil jeder Wert syntaktisch erlaubt ist. Für Feature-Detection taugen sie daher nicht.
At-Regeln wie @container oder @layer kann man damit nicht direkt prüfen. Hilfsweise testet man eine zugehörige Eigenschaft, z. B. container-type. font-tech() und font-format() werden nur in neueren Browsern erkannt.
Kompatibilität: Wird von allen modernen Browsern unterstützt, nicht aber vom Internet Explorer. Dort am besten mit window.CSS?.supports absichern. selector() funktioniert ab etwa Chrome 83, Firefox 69 und Safari 14.1.

Siehe auch

CSS CSS.escape() CSS numeric factory functions CSS.registerProperty() Cache.put()