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

@fantasai and I were reviewing this issue to see if the `progress()`/`mix()` functions adopted into the <a href="https://www.w3.org/TR/css-values-5/">CSS Values L5 FPWD</a> actually resolves it, and realized some of the important use-cases @scottkellum brought up still aren't solved by the current spec. Notably, providing multiple (more than two) breakpoints doesn't really work (except possibly via some very verbose/clumsy hacks). And interpolations of multiple properties is still awkwardly redundant.

For example, if you wanted to change 'color' from red to yellow as the container height went from 0px to 100px, and then from yellow to green as it went from 100px to 50em, that's not easily possible.

Currently, this is the best you could do:
    
```css
/* using the keyframes feature to map progress to multiple stops */
@keyframes stoplight-colors {
    0% { color: red; }
    50% { color: yellow; }
    100% { color: green; }
}
el { 
    --progress: calc(
        clamp(0, container-progress(height, 0px, 100px) * .5), .5) 
        + clamp(0, container-progress(100px, 50em) * .5, .5));
    color: mix(var(--progress) of stoplight-colors);
}

/* using @container conditionals to emulate multiple stops */
el {
  color: green;
  @container (100px <= height < 50em) {
    color: color-mix(container-progress(height, 100px, 50em), yellow, green);
  }
  @container (height < 100px) {
    color: color-mix(container-progress(height, 0px, 100px), red, yellow);
  }
}
```

Neither of these are *great*, and the first one doesn't work with any of the `*-mix()` functions, only `mix()` itself.

Two areas we can explore further to solve these problems are:
* Adopting some variant of @scotkellum's suggestion to use keyframes with <length> or other dimensional value indices, and passing in an index function such as `container-progress(height)`.
* Extending the `progress()`/`mix()` notations to multiple stops... though because matching values by index between two functions becomes hard to read, means we probably want a combined function which groups stops with values similar to linear() and linear-gradient().

The keyframes option more straightforwardly packages multiple properties across multiple breakpoints; the second one allows easier re-use of a given breakpoint-value interpolation mapping. So it's possible we might want to adopt both approaches.

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


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

Received on Monday, 11 November 2024 22:25:13 UTC