[css-values] Alternative, weighted mean syntax for calc-mix() #9658
Description
This started out as a comment to #9343 and is obviously a revival of my suggestion in #4700.
With their shared use of a single <progress> parameter, the mix functions are currently all limited to two values, start and end. While some individual alternative syntaxes support specifying a weight per entry, calc-mix() does not.
The alternative syntax of the image mix function cross-fade() even supports mixing an arbitrary number of (weighted) images – this includes colors, while the color blending function color-mix() is restricted to two values.
- If this is useful for images, I would expect that authors would sometimes find a need to mix together multiple values of other types as well.
- If the WG agreed with this assumption,
calc-mix()in particular would need an alternative syntax. Alas, this could not use the established notation for the weights of values, because ”20% 80%“ would be ambiguous.
(Note that the optional weight,<percentage [0,100]>?, precedes the value in the grammar forcross-fade()and follows it forcolor-mix(), but&&means ‘any order’.)
For linear interpolation of percentages, the order might be irrelevant, but authors may want different ones. - If this was the case indeed, the best way to allow more interpolation methods would probably be to support the various kinds of weighted means (arithmetic, geometric, harmonic, …) – or a generalized mean. [css-values] Function(s) for Standard Means #4700
- If syntax for means was to be introduced, ”calc-mix“ may not the best choice of a name.
Compilation of current grammar
<calc-mix()> =
calc-mix( <progress>, <calc-sum>, <calc-sum> )
<color-mix()> =
color-mix( <progress> && <color-interpolation-method>?, <color>, <color> )
|
color-mix( <color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2} )
<cross-fade()> =
cross-fade( <progress>, [ <image> | <color> ], [ <image> | <color> ] )
|
cross-fade( <cf-image># )
<cf-image> = <percentage [0,100]>? && [ <image> | <color> ]
<transform-mix()> =
transform-mix( <progress>, <transform-list>, <transform-list> )
<mix()> =
mix( <progress> ';' <whole-value> ';' <whole-value> )
|
mix( <progress> && of <'animation-name'> )