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

The CSS Working Group just discussed `[css-values-5] *-interpolate() grammar can lead to confusing values`, and agreed to the following:

* `RESOLVED: Explore options for making a syntactic distinction between input and interpolation options.`

<details><summary>The full IRC log of that discussion</summary>
&lt;fantasai> TabAtkins: kbabbitt noted that the interpolate puts the value we're interpolating first, then options, then a list of stops<br>
&lt;fantasai> TabAtkins: he points out that this looks confusing because some of the options can be affecting output values<br>
&lt;TabAtkins> background-color: color-interpolate(300px in hsl, 200px: red, 500px: green, 600px: blue);<br>
&lt;fantasai> TabAtkins: but are placed next to the input value<br>
&lt;fantasai> TabAtkins: 300px in hsl loos like it's modifying 300px<br>
&lt;fantasai> TabAtkins: wanted to see if we could rearrange syntax to make it less confusing<br>
&lt;fantasai> TabAtkins: oriol's suggestion was to put the options first<br>
&lt;TabAtkins> color-interpolate(in hsl / 300px, 200px: red, 500px: green, 600px: blue)<br>
&lt;fantasai> TabAtkins: this puts the options close to the 'interpolate(' word<br>
&lt;lea> q+<br>
&lt;fantasai> TabAtkins: uses a slash to separate the value out, to avoid syntactic ambiguity<br>
&lt;astearns> ack lea<br>
&lt;fantasai> lea: Not a strong objection, but I would prefer to avoid mixing slashes vs commas, because CSS is inconsistent in how it handles it<br>
&lt;fantasai> lea: can we use a keyword?<br>
&lt;lea> color-interpolate(in hsl at 300px, 200px: red, 500px: green, 600px: blue)<br>
&lt;astearns> ack fantasai<br>
&lt;oriol> q+<br>
&lt;TabAtkins> fantasai: I haven't looked at this issue, but here's a wild idea. all the other values have a colon, what if you said `300px: in hsl`<br>
&lt;lea> q+<br>
&lt;TabAtkins> fantasai: so the first value is what we're interpolating, and options for the values<br>
&lt;lea> qq+<br>
&lt;astearns> ack oriol<br>
&lt;fantasai> oriol: Another point is, I believe we can just use a comma as a separator as there's no grammar overlap<br>
&lt;TabAtkins> oriol: something else I was saying is I think we can just use a comma as a separator, ther'es no grammar overlap<br>
&lt;TabAtkins> oriol: agree with Lea that mixing slash and comma is a bit weird. so I think we can just use a comma<br>
&lt;astearns> ack lea<br>
&lt;Zakim> lea, you wanted to react to fantasai<br>
&lt;fantasai> lea: Syntactically we want to distinguish prelude from list<br>
&lt;fantasai> lea: So we want it to not look the same<br>
&lt;TabAtkins> lea: to Elika, syntactically we want to distinguish the prelude from the other arguments. the more similar it is to other args the worse the readability is, I think<br>
&lt;astearns> ack lea<br>
&lt;TabAtkins> fantasai: I don't love having them in a different order. putting the value, the core thing you're acting on, last...<br>
&lt;lea> `color-interpolate(at 300px in hsl, 200px: red, 500px: green, 600px: blue)` seems ok to me?<br>
&lt;TabAtkins> fantasai: it's also often not '300px', it's something complicated like a var()<br>
&lt;TabAtkins> fantasai: it's one of the most important parts of the function, the first thing you'll think about<br>
&lt;fantasai> astearns: Sounds like we don't have consensus on a direction yet.<br>
&lt;fantasai> RESOLVED: Explore options for making a syntactic distinction between input and interpolation options.<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12348#issuecomment-3329655312 using your GitHub account


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

Received on Wednesday, 24 September 2025 16:00:42 UTC