Re: [csswg-drafts] Interpolate values between breakpoints (#6245)

Step 4 in the "normalize mix percentages" algorithm:
> If total is greater than 0%, or if total is greater than 0% and the force normalization flag is true, multiply every percentage in items by (100% / total).

I don't understand what difference the force normalization flag makes, given that both sides of the 'or' include "total is greater than 0%".

-----

In the section on transform-mix(): As an aid to readers, suggest linking to the matrix interpolation algorithms in transforms-1 and transforms-2.

-----

Personally, I found the section on the interpolate() family to be (out of necessity) heavy on abstract concepts and hard to wrap my brain around as a result. I feel like a generous sprinkling of examples, or a link to an explainer, might be helpful. Specific points I'll call out:
* In the introductory section, after laying out the generic grammar and defining what the terms represent, one or two concrete examples of that grammar might be helpful.
* An example for `<progress-source>` of type `<dimension>`. There's one further down in 7.2.3, but I think it would be helpful to have one here - I find progress as a percentage or [0..1] value intuitive, but progress as a dimension didn't make sense to me until I realized that it was in the context of the subsequently defined stops.
* In spots where the spec talks about "options" generically, I found myself wanting examples of what those options might be.
* 7.2.2 uses the term "pinned" which I haven't seen elsewhere. How does it differ from "clamped"? Some examples of the effect of pinning might be helpful.

-----

In one of the examples for interpolation, we have:

```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. The way the commas are placed through the rest of the value, 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. Would it be feasible to separate the progress and global-options more clearly? Or would that be too inconsistent with already specified constructs?

-- 
GitHub Notification of comment by kbabbitt
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-2949943726 using your GitHub account


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

Received on Friday, 6 June 2025 17:24:09 UTC