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

[@scottkellum's example](https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-2483023664) could be written as:

```css
h1 {
  font-size: map(container(inline-size) from h1 by ease-in-out);
  color: map(container(inline-size) from h1 by ease-in-out);
  line-height: map(container(inline-size) from h1 by ease-in-out);
  /* all these are identical, so it could be put in a variable to reduce duplication */
}

@keyframes h1 {
  20rem {
    font-size: 1rem;
    line-height: 1.2;
    color: lime;
  }
  40rem {
    color: aqua;
  }
  60rem {
    font-size: 5rem;
    line-height: 1;
    color: hotpink;
  }
}

/* alternately, can keep the %s in @keyframes, 
   and use `map(container-progress(...))` to allow setting the scale with variables */
```

Or, if you did want to write them inline rather than grouping into a keyframes:

```css
h1 {
  --scale: container(inline-size) by ease-in-out;
  font-size: calc-map(var(--scale), 20rem: 1rem, 60rem: 5rem);
  color: color-map(var(--scale), 20rem: lime, 40rem: aqua, 60rem: hotpink);
  line-height: calc-map(var(--scale), 20rem: 1.2, 60rem: 1);
}
```

which is probably a lot more understandable anyway.

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


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

Received on Sunday, 16 February 2025 17:59:10 UTC