Intent to Prototype: CSS if() function

[Munira Tursunova]

Contact emails

moo...@google.com

Explainer

https://docs.google.com/document/d/1mbHBUR40jUBay7QZxgbjX7qixs5UZXkdL9tVwGvbmt0/edit?usp=sharing

Specification

https://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 component

Blink>CSS

Motivation

The CSS if() function provides a way for web authors to express complex conditional logic in a simple and concise way. The initial GitHub proposal had positive feedback from web developers. One of the use-cases might be using "if()" in custom functions, https://drafts.csswg.org/css-mixins-1/#defining-custom-functions.

Initial public proposal

https://github.com/w3c/csswg-drafts/issues/10064

TAG review

None

TAG review status

Pending

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: No signals

Other signals:

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

None

Is this feature fully tested by web-platform-tests?

No

Flag name on about://flags

None

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/346977961

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6313805904347136?gate=5132766385274880

This intent message was generated by Chrome Platform Status.