Eigenschaft und Wert eingeben, zwei Tests mit and/or verknüpfen, die Abfrage negieren und den @supports-Block kopieren. Das Urteil kommt vom Browser, der diese Seite anzeigt.
Läuft lokal in deinem BrowserDer Generator formt aus Eigenschaft und Wert einen CSS-Funktionstest und setzt ihn in einen @supports-Block. Ein zweiter Test kann mit and oder or dazukommen, die ganze Abfrage lässt sich negieren, und das Urteil fällt CSS.supports() in dem Browser, der die Seite anzeigt — nur in diesem Browser, nicht bei Ihren Besuchern.
Fünf Presets decken die häufigsten Tests ab: display: grid, container-type: inline-size, color: oklch(60% 0.2 140), backdrop-filter: blur(8px) und den Selektortest selector(:has(*)). Ein Preset füllt Eigenschaft und Wert und setzt die Verknüpfung zurück; jede Änderung danach schaltet die Auswahl auf Custom.
selector(), font-tech() und font-format() sind für sich vollständige Tests: selector(:has(*)) oder font-tech(color-COLRv1) im Eigenschaftsfeld eintragen, das Wertfeld wirkt dabei nicht mit. Ein Paar aus Eigenschaft und Wert wird erst dann zu (property: value), wenn beide Felder gefüllt sind.
Eine leere Eigenschaft oder ein leerer Wert lässt die Abfrage leer: das Urteil zeigt „Noch keine Bedingung", und der Export bleibt leer, statt einen ungültigen (: )-Block auszugeben, wie es die Seite vor diesem Durchgang tat. Auch die Negation bleibt ehrlich — @supports not (property: value) greift, wenn die Deklaration nicht unterstützt wird, unbekannte Eigenschaften eingeschlossen.
CSS.supports() läuft in der Seite, das Urteil beschreibt also nur den verwendeten Browser. Im Messlauf antwortete Chrome 153 mit true für (display: grid), (container-type: inline-size), (color: oklch(60% 0.2 140)), (backdrop-filter: blur(8px)) und selector(:has(*)); ein älterer Browser zeigt auf derselben Seite andere Ergebnisse.
Ein grünes Urteil heißt: die Bedingung ist hier gültig und unterstützt. Es ist keine Kompatibilitätstabelle für Ihr Publikum. Schreiben Sie eine einfache Deklaration vor den @supports-Block; Browser, die den Test nicht bestehen, nutzen sie als Rückfall.
Der Export hat die Form @supports <Bedingung> { <Regeln> }: die Bedingung wird genau so ausgegeben, wie sie getestet wird, und jede Zeile des Regel-Felds um zwei Leerzeichen eingerückt. Der Regeltext wird so kopiert, wie er eingetippt wurde, samt Kommentaren und Rückfall-Deklarationen; CSS kopieren legt den Codebereich Zeichen für Zeichen in die Zwischenablage.
Alles läuft in der Seite. Eingabe, Presets, Verknüpfung, Negation, CSS kopieren und Zurücksetzen lösten im Messlauf keine Netzwerkanfrage aus (en, fr, ja), und das Werkzeug arbeitet offline weiter; die einzige Anfrage an Dritte stammt vom gemeinsamen Analyseskript.