Summary: The CSS if() function provides a concise way to express conditional values. It accepts a series of condition-value pairs, delimited by semicolons. The function evaluates each condition sequentially and returns the value associated with the first true condition. If none of the conditions evaluate to true, the function returns an empty token stream. This allows web authors to express complex conditional logic in a simple and concise way.
Intent: https://groups.google.com/a/chromium.org/g/blink-dev/c/EOz7NK6Y0cE
ChromeStatus: CSS if() function
Spec: https://drafts.csswg.org/css-values-5/#if-notation
Explainer:
Initial Proposal: [css-values-5] What is the MVP for inline conditionals on custom properties? · Issue #10064 · w3c/csswg-drafts
TAG Design Review: https://github.com/w3ctag/design-reviews/issues/1045
Debuggability: CSS if() debuggability is tied into CSS Value Debugger work: https://docs.google.com/document/d/1zyKdPREtKT8OU4WtlHV_Wxet3SvyUtAXrTdFLPmYmdU
Standard Positions:
Other Resources:
=== This is a demo for if() ===
=== What if we use a wrong Custom Properties and we don't define else condition...? ===
Data-state is not valid case and there's no else case in if(), so I'm Invalid At Computed Value Time!:
=== What if there's no Custom Properties to refer to but Custom Property has fallback...? ===
Data-state is null and there's no else case in if(), but there's a fallback, so I'm sufficed!:
=== Other Queries? ===
=== Attr Regulations ===
❌ Your browser doesn't support this feature.
✅ Your browser supports this feature!
This is a demo for https://drafts.csswg.org/css-values-5/#if-notation
Try it in Chrome Canary with
--enable-experimental-web-platform-features.