[csswg-drafts] [css-values-5] *-interpolate() grammar can lead to confusing values (#12348)

kbabbitt has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-5] *-interpolate() grammar can lead to confusing values ==
Spun off from https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-2949943726.

For color interpolation, an author might specify: 

```css
background-color: color-interpolate(300px, 200px: red, 500px: green, 600px: blue);
```
To me, this is intuitive to read: 300px as the progress value, then a list of stops.

An author might also specify:
```css
background-color: color-interpolate(300px in hsl, 200px: red, 500px: green, 600px: blue);
```
Reading "300px in hsl" without having yet wrapped my brain around the grammar threw me for a loop. It read to me like we were somehow supposed to convert 300px to hsl and use that as the progress value, which made no sense. 

The current general form of the interpolation functions is:
```
*interpolate() = *interpolate( [ progress && global-options? ],
                               stop, [  between-options? , stop ]# )
```

So "300px in hsl" breaks down as a progress value of "300px" and a global option value of "in hsl".

Would it be worth separating the progress value and option value more clearly? We'd be trading away a little flexibility for a little readability; maybe it's worth it maybe not - what do folks think?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12348 using your GitHub account


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

Received on Tuesday, 17 June 2025 01:06:37 UTC