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

<details>
<summary>Attempting once again to summarize the discussion for TPAC…</summary>

The goal is a more robust way of describing fluid values based on container features. While calc and clamp provide some basics: 

- the math is not intuitive
- the scaling is always linear
- the interpolation is always between two points
- and related properties like font metrics can't be grouped

We also want to avoid relying on 'animation' for this. The animation origin is needed to ensure smooth motion, but fluid typography belongs in the author origin, cascading where defined. To get where we're going, we need two parts…
</details>

## Query Timelines:

A way to access our current position along a 'timeline' of container attributes (e.g. the inline-size of the container is currently `30%` of the way between `30em` and `2000px`). Ideally we can create both named timelines, and anonymous on-the-fly timelines for various aspects of the container.

For named timelines: 

1. @fantasai and I originally [proposed a `@timeline` rule](https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-926351855). Part of the reason we avoided `animation-timeline` is that we didn't want to rely entirely on animations, for cascade reasons.
2. @danielsakhapov [proposed `container-timeline` properties](https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-1706078781) to match scroll-timeline properties – without necessarily being tied to animations for usage. 

For anonymous timelines:

1. @bramus points out we would [also want a `container()` function](https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-1707234285) to match `scroll()` and `view()`.
2. @emilio has proposed (offline) a generic unit-based syntax, eg `timeline(100cqi from 320px to 75ch)` (name and details TBD). The advantage is that it's very flexible for mixing and matching a variety of units, as long as they can be expressed with CSS math. That might also be the downside, since it requires a bit more mathematical mental model.

(Depending how those resolve, they could also be captured in custom properties to achieve a named use-case?)

## Value Interpolation:

Ideally, we want the ability to define both one-off interpolations between two values, and also more complex grouped properties/keyframes.

- The already-approved `mix()` function can potentially handle the single-property, two-state cases in a fairly generic way. But [it may be too broadly defined](https://github.com/w3c/csswg-drafts/issues/9343), or not well-enough defined?

Grouped properties and multi-keyframe values could both be handled well by `@keyframes` definitions, if we have good ways to access those values without relying on the animation origin. To that end…

- There's been discussion over the last week about accessing a keyframe-interpolated value with a new function like `from-keyframes(<keyframes>, <timeline>)`. Looking back, this is the same as [our original accepted proposal](https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-926351855) for `mix()`. Maybe we just need to define the details better, and make sure it can be implemented?

In the future… It would still be useful in some cases to get all the properties from a keyframe rule, without using animations. There's a proposal above to do that with a new property that expands to represent multiple interpolated properties. @astearns has pointed out [that sounds like a 'mixin'](https://css.oddbird.net/sasslike/mixins-functions/#keyframe-based-mixins-for-interpolated-values). Maybe something we want to think about as a separate issue, and not necessarily required for a first version of the feature.

## My hope for this discussion:

- Can we agree on a direction for defining the query timelines? An at-rule or set of properties for the named option, and an anonymous function of some kind?
- Can we better define a `mix()` function that can be implemented? Maybe narrowing it to the scope of properties that have defined interpolation for transitions, animations, gradients, etc? Would there be more required?

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


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

Received on Thursday, 14 September 2023 22:16:29 UTC