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

The CSS Working Group just discussed `Interpolate values between breakpoints`.

<details><summary>The full IRC log of that discussion</summary>
&lt;bramus> miriam: I can intro this<br>
&lt;bramus> astearns: and outline what we may want to resolve for a future meeting<br>
&lt;bramus> miriam: goal of this is to be able to look at set of MQs or CQs and say that we dont want to just the font size in a linear way but want to do …<br>
&lt;bramus> …  not just use viewport/container units<br>
&lt;bramus> … we want to follow an easing curve<br>
&lt;bramus> … similar to an animation in some ways, but are looking at one specific frame<br>
&lt;bramus> … more complex easing … eg font size change in one way while line height … several props that follow some easing path as the container grows<br>
&lt;bramus> … ppl are using hacks for this<br>
&lt;bramus> … would be nice if we have this built into the platform<br>
&lt;bramus> … pieces you need are a way to look at container/media and know where you are<br>
&lt;fantasai> -> https://drafts.csswg.org/css-values-5/#progress<br>
&lt;bramus> … proposal is for a progress function<br>
&lt;fantasai> progress(&lt;calc-sum> from &lt;calc-sum> to &lt;calc-sum>)<br>
&lt;fantasai> media-progress(&lt;media-feature> from &lt;calc-sum> to &lt;calc-sum>)<br>
&lt;bramus> … instead of returning dynamic value at min/max and say “where is between both min/max” and get back the fraction<br>
&lt;fantasai> container-progress(&lt;size-feature> [ of &lt;container-name> ]? from &lt;calc-sum> to &lt;calc-sum>)<br>
&lt;bramus> … so you can have generic progress() ???<br>
&lt;bramus> … also a media and container progress, to look at media/container features<br>
&lt;bramus> … next part is being able to mix values using those progresses<br>
&lt;astearns> s/???/that is like clamp(), using calc()<br>
&lt;bramus> … so we proposed several typed mix functions<br>
&lt;bramus> … color-mix and calc-mix<br>
&lt;bramus> … that take 2 values and a progress and give you an interpolation between the two values<br>
&lt;bramus> … last step is to have a way to set up multiple values in a keyframes way and track across multiple keyframes<br>
&lt;bramus> … ??? but go across values<br>
&lt;bramus> … to do that we had in a mix function that can reference keyframes and look at the property<br>
&lt;bramus> … andruud had some concerns<br>
&lt;bramus> … we proposed a mixin like syntax<br>
&lt;bramus> … might at least be a first step<br>
&lt;bramus> … trying to piece all parts together<br>
&lt;bramus> … hopefully that made sense?<br>
&lt;bramus> astearns: so what are the next steps you think?<br>
&lt;bramus> miriam: I would likely tackle them  in the proposed order<br>
&lt;bramus> … ??? gets us part way<br>
&lt;bramus> … then the mix functions give us a lot of power to get interpolated values<br>
&lt;astearns> s/???/progress()<br>
&lt;bramus> … and then keyframe access<br>
&lt;fantasai> Proposal: Add *progress() functions to css-values-5 ED<br>
&lt;bramus> fantasai: we added these all in the ED (?). we have previous resolution to draft a bunch of things, but not specifically these things<br>
&lt;bramus> … proposal is to add progress() and calc-mix next to values-5<br>
&lt;fantasai> Proposal: Add calc-mix(), and prallel type of color-mix(), cross-fade() to css-values-5<br>
&lt;bramus> … ??? and parallel types of color-mix, cross-fade (?)<br>
&lt;TabAtkins> Note also that many of these functions hit the "arguments might contain commas" problem; we'll need to resolve on &lt;https://github.com/w3c/csswg-drafts/issues/9539> as well.<br>
&lt;bramus> … eventually we want to ?? but first we ask if we are in the right direction<br>
&lt;fantasai> s/prallel/parallel/<br>
&lt;bramus> astearns: lets take these up in future meetings<br>
&lt;bramus> … progress() can be async<br>
&lt;bramus> … we’ll have to do this on future meetings<br>
&lt;bramus> … thanks for intro’ing this<br>
&lt;fantasai> calc-mix( &lt;progress>, &lt;calc-sum>, &lt;calc-sum> )<br>
&lt;bramus> … see you next week and hopefully get to the zoom items<br>
&lt;bramus> … thanks!<br>
&lt;fantasai> &lt;progress> = [ &lt;percentage> | &lt;number> | &lt;'animation-timeline'> ]? &amp;&amp; by &lt;easing-function><br>
</details>


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


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

Received on Wednesday, 15 November 2023 18:03:37 UTC