[css-values] Conditional syntax for if()

[LeaVerou]

Over the years there have been several issues and proposals on an inline if() function:

• [css-values]: Express conditional values in a more terse way  #5009
• [css-variables?] Higher level custom properties that control multiple declarations #5624
• My old css-conditional-values unofficial draft

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, 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 could 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 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(), first-supported() have been going with semicolons as the separator seems preferable.

cc @tabatkins @mirisuzanne

[mirisuzanne]

I think the syntax proposed by the unofficial draft makes sense. Where it matters, style queries, container range queries, and the proposed inline if all overlap in how they understand (or hope to understand) comparison operators, parenthesis, and logical combinators. From there, each has it's own constraints - and I don't see any reason the constraints of one should impact the functionality of another.

[muratcorlu]

inline if() is the only missing piece for being able to use higher level custom properties to customize web components,

Once we have style container queries with extended style query syntax, do we still need to have if() for customizing web components with CSS variables? Can you give an example that can not be done with style queries? Or do we want to give another practical option to the developers?

Web components always have a container and variables will be always applied to the container element. As far as I see, if() is only helpful if you don't want to rely on a container, or as an "alternative" to style queries. Am I missing a point here?

[mirisuzanne]

The inline if() would have advantages in several cases:

• For cases where an author needs different conditions for individual properties, the container at-rule becomes very repetitive.

• All the use-cases that could be applied to web components with a host and shadow-dom (where a host is built-in) can also be applied to 'components' built with normal elements and no shadow dom. In those cases, there is no guarantee of a container. There's no reason for us to consider shadow-dom the primary use-case for these features.

• As noted by @LeaVerou above, in the context of a property we can allow comparing eg numbers with percentages.

  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.

[LeaVerou]

To add to what @mirisuzanne said above, even with web components, you often want to style the element itself. Not everything is done in shadow DOM.

[benface]

Would this proposed if() function allow for something like this?

display: if(--hidden: 1, none, flex);

[LeaVerou]

@benface yes, except the syntax would look more like if(style(--hidden: 1), none, flex).

[benface]

Great, thank you @LeaVerou. So it sounds like this will allow us to control the value of multiple properties (including custom properties) from a single property... effectively replacing the "space toggle" hack? If so, I'm all in.

[LeaVerou]

Yes.