[css-color-5] Should there be a comma after the colorspace in color-mix()?

[weinig]

In CSS Color 5's color-mix() function, https://drafts.csswg.org/css-color-5/#color-mix, should there be a comma after the colorspace? For example, which of the following is correct:

color-mix(lch, red 40%, blue);

or

color-mix(lch red 40%, blue);

The grammar requires one:

color-mix() = color-mix(<colorspace>?, <mix-component>#{2})

but the examples all exclude it. See Example 7 and Example 9.

[svgeesus]

@tabatkins has been making us all use the CSS comma only for separating list items.

So, the comma after the colorspace serves only to delimit it from the colors. I don't see is every adopting colorspaces that has spaces. We don't explicitly say so, but their lack of quoting implies that a colorspace is an ident and thus the allowed codepoints don't require any sort of delimiter.

So I see no value in the comma (and as the examples show, always forget to type it) and think it should be removed.

Thanks for your careful review.

@una @argyleink @LeaVerou any objections to removing this comma?

[argyleink]

🪓 the comma 👍🏻

[LeaVerou]

I have removed the comma so I'm going to close this.

Note that this means we can never have multiple colors in color-mix(), so perhaps we should close the issue about that (which I can't find right now)

[samweinig]

Note that this means we can never have multiple colors in color-mix(), so perhaps we should close the issue about that (which I can't find right now)

Why is that?

[LeaVerou]

Because lists need to be comma separated.

[samweinig]

Oh, I see you removed the comma from both after the color space and between the colors. I see that now. Sorry about that.

[tabatkins]

@tabatkins has been making us all use the CSS comma only for separating list items.

Sigh, I'd appreciate you not pretending I'm being an unreasonable ogre.

The point that @fantasai and I have made is that functions are just named chunks of CSS syntax, so they should work by the same rules that CSS syntax does anywhere else. Acting like they're traditional JS functions or whatever, where every argument must be separated by commas because there is no other way to distinguish values from each other, is just silly.

We have guidelines for how to use commas so CSS has a consistent look and feel, and people don't have to memorize even more custom syntax. But we can always violate the guidelines if necessary, if the confusion from following it strictly is worse than the confusion of violating the guideline.

Notably, lists of parallel grammar chunks are fine to use commas with, and guess what, that's exactly what we're looking at here. If we're definitely sticking with only two items, it can be reasonably argued either way based on the details, but I think here it's pretty important that it be clear the % is associated with the first item, and using a comma will definitely help with that. Also, the parallel with cross-fade() strongly suggests you should use the same syntax and separate the chunks with commas.

Separating the additional info (colorspace) from the rest with a comma also makes sense, just like how gradients or shape functions do with their prelude info; as has been argued here, it prevents accidentally reading them as applying to the first item in the list. But within that prelude, if we have more pieces of info, they probably won't use additional commas, because CSS doesn't need to do that to distinguish grammar bits.

[svgeesus]

I didn't say you were unreasonable or an ogre; just that you were enforcing consistency.