Re: [csswg-drafts] [css-values-5] What is the MVP for inline conditionals on custom properties? (#10064)

> Btw IACVT handling is identical across the two — unless I’ve misunderstood a part of Tab's proposal, their differences are purely syntactic.

@LeaVerou Oh, does that mean the `:` would actually be optional in the `?:` approach? E.g.:

```
background: if(
    style(--status:error) ? red:
    style(--status:warning) ? yellow
);
```
(IACVT for `--status:ok`, for example.)

> FWIW I think my biggest issue with (A) is the verbosity of an explicit `else:` clause — this is a feature that will be used all over the place, and thus is one of the few cases where terseness should be a priority.

I do see that for short one-liners, e.g.:
```
width: if(style(--wide): 200px, else: 100px);
/* vs */
width: if(style(--wide) ? 200px : 100px);
```
For a multi-line thing with multiple clauses, though, the `else:` seems to fit in a little better without feeling verbose. Could we somehow drop the `else:`, and make it just: `if(style(--wide): 200px, 100px)`? (Oriol seems to think "yes").

> > we couldn't distinguish a single fallback `<declaration-value>` from a `<cond> ':' <declaration-value>`
> 
> I think we could distinguish them because only the last item of the comma/semicolon-separated list would use the former. All the other items in the list would need to parse `<cond> ':'` before the `<declaration-value>`. But I don't really mind having the `else:` or not.

@Loirooriol This would have to exclude `:` from the fallback's `<declaration-value>`, then? Otherwise, all of `style(--status:warning): yellow` (a valid `<declaration-value>`) would actually be treated as the fallback value?

```
background: if(
    style(--status:error): red,
    style(--status:warning): yellow
);
```

Maybe we can make the `else:` part _optional_:

 - We first try to parse an item as `<cond> ':' <declaration-value>`. If that succeeds, it's a clause.
 - Otherwise, we try parse as a `<declaration-value>`. If that succeeds, it's fallback.

In the hopefully super-rare event that you _want_ literally `style(--status:warning): yellow` (or similar) as your fallback value, you'd then do:

```
--foo: if(
    style(--status:error): red,
    else: style(--status:warning): yellow
);
```

You'd also still use `else:` to get an empty (but valid) value, if needed.

This would make the above mentioned one-liner just `width: if(style(--wide): 200px, 100px)`, beating the `?:` approach by two characters when you adhere to my whitespace preferences. :-)

-- 
GitHub Notification of comment by andruud
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10064#issuecomment-2325310681 using your GitHub account


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

Received on Monday, 2 September 2024 21:21:43 UTC