[csswg-drafts] [css-values-4] Allow mixing Percentages and Dimensions for the first argument of `progress()` (#13315)

kizu has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-4] Allow mixing Percentages and Dimensions for the first argument of `progress()` ==
In my experiments, I often found a need to be able to provide an API that accepts percentages, but then to be able to somehow communicate the _percentage of what_ that should be.

I think the `progress()` is a great place to add this feature.

The [current definition](https://drafts.csswg.org/css-values-5/#progress) of `progress()` has this:

> The argument [calculations](https://drafts.csswg.org/css-values-4/#calc-calculation) can resolve to any [`<number>`](https://drafts.csswg.org/css-values-4/#number-value), [`<dimension>`](https://drafts.csswg.org/css-values-4/#typedef-dimension), or [`<percentage>`](https://drafts.csswg.org/css-values-4/#percentage-value), but must have a [consistent type](https://drafts.csswg.org/css-values-4/#css-consistent-type) or else the function is invalid.

My proposal: allow using the `<T-percentage>` ([mixed percentages](https://drafts.csswg.org/css-values-4/#mixed-percentages)) if the other arguments are `<T>`.

This would allow us to evaluate things like `progress(50% + 100px, 100px, 100cqi)` — with `50%` being evaluated against the “progress end value minus progress start value”, so this would basically equal to `progress(0.5 * (100cqi - 100px) + 100px, 100px, 100cqi)`, for example.

Of course, usually you won't write it directly, but have some custom property as your styles’ API, and with this feature, you could set this custom property like `--limit: calc(50% + 100px)`, and then evaluate it via `progress(var(--limit), …)`.

(initially, I thought that maybe we could add it to the general `mix-` properties, but those don't have the specific start and end values like `progress()` has, which allows us to evaluate this `%` inside).

Example CodePen that doesn't work for now, but which I want to work: https://codepen.io/kizu/pen/VYjjmBR

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13315 using your GitHub account


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

Received on Thursday, 8 January 2026 15:21:25 UTC