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

  > The interpolation notations in CSS include:
  >
  > - `palette-interpolate()`, for interpolating font-palette values

The definition of `palette-interpolate()` is missing. I guess it will be added later.

---

I assume how interpolation functions are restricted in some contexts will be clarified in #10982. For example, when they take `<'animation-timeline'>` or relative `<length>`.

---

  > - `calc-interpolate()`, for interpolating `<length>`, `<percentage>`, `<time>`, and other dimensions representable in `calc()` expressions

This somewhat suggests that `<number>` is invalid, which it is not, and interpolating `<number>` does not seem to be a "niche" use case. The same applies for the description of `calc-mix()`.

---

  > `<progress-source> && [by <easing-function>]? && <easing-function>? && <segment-options>?`

It is equivalent to `<progress-source> && [by <easing-function> || <easing-function> || <segment-options>]?`, which seems simpler and makes the requirement on the mandatory `<progress-source>` more obvious, imo. I suspect you already considered binding `<progress-source>` and `by <easing-function>`.

`<segment-options>` is a generic production but it is not recognized [as such](https://github.com/w3c/webref/blob/0bfe200daa66bf24e09a60f1daafb83843cdc5d3/ed/css/css-values-5.json#L417) by `w3c/webref`. Would it be possible to tweak the markup to avoid this? Perhaps by adding an `informative` class?

In my opinion, the description of the `<easing-source>` global option should be defined in a separate (preceding) section:

  > **7.1.2. Defining the Interpolation Map**
  >
  > `<easing-function>`
  >
  > When appearing in *the first argument*, specifies the “default” easing function to be used between each stop.

This section is about the interpolation map (the stop list) while *the first argument* refers to the global options.

---

All interpolation functions requires two or more stops, while `*-gradient()` and `linear()` accept a single stop. Is it intentional?

---

The value range of `<input-position>` is not explicitly defined. 

Is it `<number> | <percentage> | <dimension>`? `<calc-sum>`?

[7.2.1 Type Checking](https://drafts.csswg.org/css-values-5/#interpolation-validity) may suggest that it can also be `<'animation-timeline'>`:

  > Each `<progress-source>` and `<input-position>` has a type, which can be proportional (`<number>`, `<percentage>`, or `<'animation-timeline'>`) or absolute (all other types, and `<'animation-timeline'>`).

It also suggests that there are multiple `<progress-source>`:

  > Each `<progress-source>` and `<input-position>` has a type [...] all `<progress-source>` and `<input-position>` values [...]

But then this confuses me:

  > The proportional types represent progress as a percentage; any mix of these types is valid. The absolute types represent progress in absolute dimensions, and all `<progress-source>` and `<input-position>` values that are not proportional must have a consistent type for the notation to be valid.

Do you consider `<progress-source>` and `<input-position>` as both representing progress values? Otherwise, how can you mix types when specifying progress? What does represent an input position specified with a proportional type?

I would have thought that a percentage for an input position in `calc-interpolate()` replacing `<length-percentage>`, would represent a `<length>`.

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


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

Received on Monday, 9 June 2025 13:19:38 UTC