Contact emailsmoon...@google.com, andr...@chromium.org Explainer https://docs.google.com/document/d/1mbHBUR40jUBay7QZxgbjX7qixs5UZXkdL9tVwGvbmt0/edit?usp=sharing
Specificationhttps://drafts.csswg.org/css-values-5/#if-notation 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. Example: <style> div { color: var(--color); background-color: if(style(--color: white): black; else: white); } .dark { --color: black; } .light { --color: white; } </style> <div class="dark">dark</div> <div class="light">light</div> Blink componentBlink>CSS <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22> Search tagscss <https://chromestatus.com/features#tags:css>, css-values <https://chromestatus.com/features#tags:css-values>, if <https://chromestatus.com/features#tags:if>, inline-conditionals <https://chromestatus.com/features#tags:inline-conditionals> TAG reviewhttps://github.com/w3ctag/design-reviews/issues/1045 TAG review statusPending Risks Interoperability and Compatibility None *Gecko*: No signal ( https://github.com/mozilla/standards-positions/issues/1167) *WebKit*: No signal ( https://github.com/WebKit/standards-positions/issues/453) *Web developers*: Positive *Other signals*: https://geoffgraham.me/unconditional-love-for-conditional-css/ https://lea.verou.me/blog/2024/css-conditionals/ https://geoffgraham.me/conditionals-on-custom-properties/ https://www.bram.us/2025/02/18/css-at-function-and-css-if/ https://x.com/LeaVerou/status/1801192208025940200 WebView application risks Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications? None Debuggability Ties into CSS Value Debugger work: https://docs.google.com/document/d/1zyKdPREtKT8OU4WtlHV_Wxet3SvyUtAXrTdFLPmYmdU Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?Yes Is this feature fully tested by web-platform-tests <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> ?Yes https://wpt.fyi/results/css/css-values?label=master&q=if- https://wpt.fyi/results/css/css-values/if-cycle.tentative.html -the cycles behaviour has been resolved in https://github.com/w3c/csswg-drafts/issues/11500, but the spec does not address the resolution yet. Flag name on about://flagsCSSInlineIfForStyleQueries, CSSInlineIfForMediaQueries, CSSInlineIfForSupportsQueries Finch feature nameCSSInlineIfForStyleQueries, CSSInlineIfForMediaQueries, CSSInlineIfForSupportsQueries Requires code in //chrome?False Tracking bughttps://issues.chromium.org/issues/346977961 Estimated milestones Shipping on desktop 136 Shipping on Android 136 Shipping on WebView 136 Anticipated spec changes Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way). None Link to entry on the Chrome Platform Status https://chromestatus.com/feature/6313805904347136?gate=5199452060778496 Links to previous Intent discussionsIntent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAAO7W_D9CCHOcXKNkbaVDFzUOWO7o9tcH1t7rS0xUaeKupYDTQ%40mail.gmail.com -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscr...@chromium.org. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAAO7W_DPz5FabaFMjsh%2BPWj4bjF0wY8E2QuYvH89BNYQEshhNA%40mail.gmail.com.
