[csswg-drafts] [css-values] Conditional syntax for `if()` (#8446)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values] Conditional syntax for `if()`  ==
Over the years there have been several issues and proposals on an inline `if()` function:

- #5009
- https://github.com/w3c/csswg-drafts/issues/5624
- My old [css-conditional-values unofficial draft](https://drafts.csswg.org/css-conditional-values/#if)

My understanding is that we generally have consensus that we need this, but the devil is in the details. 
Now that style container queries are [shipping](https://groups.google.com/a/chromium.org/g/blink-dev/c/ACL23q_nbK0/m/PaNJ81_qDAAJ), inline `if()` is the only missing piece for being able to use higher level custom properties to customize web components, and it would be nice if they should ship somewhat close to each other.

It seems that one of the primary blockers for `if()` is syntax, and especially the syntax of the condition itself.

### Condition

I see two directions for this:
a) We adopt the style container query syntax wholesale, and accept `<style-query>` as the condition. 
b) We define a new syntax in terms of comparing *values*, similar to what [css-conditional-values unofficial draft](https://drafts.csswg.org/css-conditional-values/#if) was trying to do.

The upside of (a) is consistency and learnability, it's much easier for authors to learn one conditional syntax for both places.
The upside of (b) is that it's strictly more powerful. Since `if()` is used on a specific property, resolving all values is possible, so the constraints of the container query syntax don't really apply. Also, there are plans to extend `<style-query>` to arbitrary properties, which may not be desirable for `if()`.

### Other syntax considerations

What should we use to separate the condition from the iftrue and iffalse values? In my original design I used commas, but this means we cannot use any values that *contain* commas, so the direction [`mix()`](https://drafts.csswg.org/css-values/#interpolate), [`first-supported()`](https://github.com/w3c/csswg-drafts/issues/5055) have been going with semicolons as the separator seems preferable.

cc @tabatkins @mirisuzanne 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8446 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 13 February 2023 16:32:02 UTC