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