- From: Tab Atkins Jr. via GitHub <sysbot+gh@w3.org>
- Date: Sat, 09 May 2020 00:16:16 +0000
- To: public-css-archive@w3.org
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