Re: [csswg-drafts] [css-values] Abandon mix()? (#9343)

I think the goal of `mix()` is a little murky and if we're keeping it we need to reach consensus on that:
Is it intended to…
1. Allow authors to tap into the default interpolation algorithm without having to resort to hacks like paused animations with negative delays or complex logic, i.e. any `mix()` value always has an equivalent CSS value without `mix()`, essentially a higher level abstraction over existing syntax.
2. Or to *also* serve as the (potentially sole) representation of the interpolated value for certain types, essentially reducing the need to add more specific `*-mix()` functions to CSS?

These involve different tradeoffs and different design decisions. I suspect 1 is easier to implement (?) and from the author's perspective, 1 covers their use cases just fine. 2 does make for a smaller API surface, but its benefits are largely internal.

From an author perspective, it’s entirely unclear why `mix()` needs to be a whole value, or how exactly does this work. E.g. I imagine most authors would not be able to tell with reasonable confidence whether this would be allowed:

```css
--untyped-custom-property: mix(...);
property: something var(--untyped-custom-property), something else;
```

> The current path we're on elsewhere in CSS, with type-specific mix functions (color-mix, font-palette-mix) seems way more sensible

`mix()` covers distinct use cases over these.

---

I wonder if a reasonable MVP would be to only ship the [`mix(<progress> of <animation-name>)`](https://drafts.csswg.org/css-values-5/#mix) syntax. It is unclear from the current spec what property that returns, but it seems like that should be a parameter that would default to the current property:

```
<mix()> = mix( [ <custom-ident> at ]? <progress> of <animation-name> )
```

This already makes the current workarounds *a lot* easier, doesn’t have warts like having to be the whole value of a property, and can even be generalized in a limited way like so:

```css
@keyframes mix-helper {
 from { background: var(--from);
 to { background: var(--to);
}

.foo {
 --from: yellow;
 --to: linear-gradient(in oklch, yellow, oklch(.5 .2 180));
 other-property: mix(background at 30% of mix-helper);
}
```

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


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

Received on Wednesday, 29 November 2023 16:47:45 UTC