Was ist CSS if()-Funktions-Builder?
Die CSS-if()-Funktion ermöglicht es, bedingte Werte direkt innerhalb einer Eigenschaftsdeklaration zu schreiben. Anstatt einen Wert in @media, @container oder @supports zu verpacken, verwenden Sie if() inline: width: if(style(--variant: large): 300px else 150px). Sie unterstützt drei Bedingungstypen: style() zur Prüfung von CSS-Custom-Properties, media() für Media Features und supports() zur Browser-Feature-Erkennung.
Kurze Antwort
Die CSS-if()-Funktion ermöglicht bedingte Werte inline in einer Eigenschaftsdeklaration. Verwenden Sie if(style()) zur Abfrage von CSS-Custom-Properties, if(media()) für Media Features oder if(supports()) für Browser-Feature-Erkennung. Chrome 137+ unterstützt if(style()).
Last updated: 2026-05-30
Einschränkungen
- Die if()-Funktion ist nur in Chrome 137+ (style()) und Chrome 142+ (media(), supports()) verfügbar.
- if() wertet eine einzelne Bedingung für einen einzelnen Wert aus - es kann @media nicht für komplexe Regelsätze ersetzen.
- if(style()) funktioniert nur auf explizit gesetzten oder registrierten Custom Properties.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Wählen Sie den Bedingungstyp: style() für Custom Properties, media() für Viewport oder supports() für Feature-Erkennung.
- Geben Sie den Bedingungsausdruck und den Wert für den True-Fall ein.
- Fügen Sie optional einen else-Wert für den False-Fall hinzu.
- Kopieren Sie die generierte if()-Deklaration direkt in Ihren CSS-Eigenschaftswert.
Wofür du es nutzen kannst
- Setzen Sie eine andere Breite basierend auf einem CSS-Custom-Property-Wert ohne @container-Query.
- Wenden Sie einen Farbschema-Wert basierend auf prefers-color-scheme innerhalb einer einzelnen Deklaration an.
- Stellen Sie einen Fallback-Wert bereit, wenn der Browser eine bestimmte CSS-Funktion nicht unterstützt.