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

I feel like using `,` introduces (potential) confusion for any kind of list, like font-family/box-shadow/background/etc. unless you tuck it away in a variable, while `;` and `:` are already significant symbols and might trip up parsing (emphasis on "I feel" and "might" because I don't work on browser engines!).

The question mark not only feels semantically correct (with the sentence-like structure of `is cond true ? if so, here's A : if not, here's B`), but if paired with `:`, we get the familiarity of ternaries many already know from in other languages like JS and PHP (see example `one`). That said, if the question mark should be reserved for a higher purpose, it might be possible to go all in with `:` (see example `two`).

Would the below be viable examples?

```css
one {
    font-size: if(media(width < 800px) ? 1rem : 1.5rem);
    font-family: if(media(print) ? Times New Roman, serif : Helvetica, sans-serif);
    color: if(
        style(--accent: blue) ? cyan :
        style(--accent: red) ? pink :
        white
    );
}

two {
    font-size: if(media(width < 800px) : 1rem : 1.5rem);
    font-family: if(media(print) : Times New Roman, serif : Helvetica, sans-serif);
    color: if(
        style(--accent: blue) : cyan :
        style(--accent: red) : pink :
        white
    );
}
```

I would learn towards the `?:` combo due to ternary familiarity, and how it's easier to pick up where the conditions are, at a glance. It's terse, but readable, whereas the abundance of `:` in the other example can be confusing unless formatted like above. If you gave me the following (contrived) example, I'd be confused as to where one thing ends and the other begins:
```css
color: if(style(--accent: blue) : var(--color-main) : style(--accent: red) : oklch(from var(--color-secondary) 0.85 50% calc(h/2)) : var(--color-base))
```

Anyway, just my two cents, and I wanted to make sure I understood what is potentially feasible. Very excited for this to land either way!

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


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

Received on Sunday, 21 July 2024 00:53:29 UTC