- From: Sebastian Zartner via GitHub <sysbot+gh@w3.org>
- Date: Mon, 20 Mar 2023 20:32:32 +0000
- To: public-css-archive@w3.org
SebastianZ has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-backgrounds-4][css-grid] Allow transitions between different types within `stripes()` == In #8140 @fantasai changed the computed value of [`stripes()`](https://drafts.csswg.org/css-images-4/#funcdef-stripes) to say > The computed value of this function is an ordered list of stripes, each given as a computed color and a thickness represented either a `<flex>` value or a computed `<length-percentage>` value. The reason behind that was to make it work for inherited properties. Though that seems to come at the cost of not being able to transition between values. At the same time, [CSS Grid defines](https://drafts.csswg.org/css-grid-1/#typedef-flex) this: > `<flex>` values are not `<length>`s (nor are they compatible with `<length>`s, like some `<percentage>` values), so they cannot be represented in or combined with other unit types in `calc()` expressions. Both result in disallowing transitions between values of different types. In #8163 I provided an example of how those types could be computed. That would allow transitioning between them and animating them. Taken from that issue: > How do you interpolate from `stripes(#000 10px, #111 20px)` to stripes(#222 10fr, #333 20fr)? Possible answer: With a total width of 60px, the transition would be from `stripes(#000 10px, #111 20px, transparent 30px)` to `stripes(#222 20px, #333 40px, transparent 0px)`. For 120px total width it would be from `stripes(#000 10px, #111 20px, transparent 90px)` to `stripes(#222 40px, #333 80px, transparent 0px)`. Also `stripes(#111 calc(5px + 5fr), #222 calc(10px + 10fr))` could be made valid. With a total length of 60px again, it would be equivalent to `stripes(#111 calc(5px + 15px), #222 calc(10px + 30px))`. And assuming a total width of 120px, it would be the same as `stripes(#111 calc(5px + 35px), #222 calc(10px + 70px))`. Sebastian Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8622 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 20 March 2023 20:32:34 UTC