Re: [csswg-drafts] [css-values]: Express conditional values in a more terse way (#5009)

So there's three distinct functions being bandied about here.

1. The one [mentioned by Carlos](https://github.com/w3c/csswg-drafts/issues/5009#issuecomment-620766100), where you provide a list of `<any-value>`s and an index, and it resolves to the nth value; this function can be used anywhere. It's also almost certainly var()-like (in that it makes the property always-valid at parse time as long as the overall function is valid, turns on iacvt behavior, etc.)*

 ```css
    color: nth-value(var(--x); red; blue; yellow);
    ```

 (There's a minor variant where you supply a value, and then pairs of values to match against and `<any-value>`s, selecting the first pair whose match-value is identical to the first arg. This allows for named keys, which can be more readable in some cases than just a list, but is also more verbose for *technically* no additional functionality. I'll consider this off the list for now, but keep it on the back-burner just in case.)

 ```css
    color: nth-value(var(--x); (light-low) red; (dark-low) blue; (light-high) yellow);
    ```

2. The one [mentioned by Lea](https://github.com/w3c/csswg-drafts/issues/5009#issuecomment-625545276), which is a [math function](https://drafts.csswg.org/css-values/#math) you provide pairs of calc()-ish comparisons and calc()-ish results, and it resolves to the first value whose comparison succeeds; this can be used anywhere a calc() can. (Just like the other math functions, we can tell what its type will be at parse-time by examining the calculations and grammar-check that accordingly, so it doesn't need to be var-like.)

 ```css
 margin-left: cond((50vw < 400px) 2em, (50vw < 800px) 1em, 0px);
 ```

3. The one [mentioned by Brian](https://gist.github.com/bkardell/e5d702b15c7bcf2de2d60b80b916e53c), where you provide pairs of comparisons (more powerful than what calc() can access; basically what a Layout Worklet is provided) and `<any-value>`s, and it resolves to the first value whose comparison succeeds; this function can be used in a restricted set of safe properties that are "downstream" of the values it's allowed to compare over. (Most CSS properties are "safe", tho.) It's also almost certainly var()-like.*

 ```css
 grid-template-columns: switch(
   (available-inline-size > 1024px) 1fr 4fr 1fr;
   (available-inline-size > 400px) 2fr 1fr;
  (available-inline-size > 100px) 1fr;
  default 1fr;
  );
 ```

-----

All three seem to do something useful and distinct; none of them can reasonably be folded into the other without losing significant amounts of functionality.

As I did in the examples above, I suggest for the purposes of discussion we call (1) `nth-value()`, (2) `cond()`, and (3) `switch()`.

------

* If we restrict the functions to only be usable as the whole value of a property, they don't need to be var-like; the UA can instead just grammar-check each of the `<any-value>`s against the property's grammar at parse-time. This may be a reasonable imposition. That said, `nth-value()` will really *only* be used with a `var()` or similar as its first argument anyway, so the question is moot in practice for it; it's still potentially relevant for `switch()`, tho.

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

Received on Saturday, 9 May 2020 00:16:18 UTC