Gregory's ServerSomething to add to your CSS reset from now on:
```
:root {
interpolate-size: allow-keywords;
}
```
It enables things like transitions from `height: 0` to `height: auto`.
https://developer.chrome.com/docs/css-ui/animate-to-height-auto/
 20 comments
@mayank That is detailed in this section of the article: https://developer.chrome.com/docs/css-ui/animate-to-height-auto/#why_not_allow_animation_to_and_from_sizing_keywords_by_default  By pure chance, this is exactly what I need for my current project! 😮 Thank you! 💜 @keithjgrant yes. Calc-size() is only needed when you want to actually calculate. Otherwise just use interpolate-size and you're good to go.   @bramus Caveats: Chrome 129+ only. Experimental. Not supported by Safari or Firefox. https://caniuse.com/mdn-css_properties_interpolate-size_allow-keywords @bramus it does matter in the sense that it won't be supported, and future adoption is uncertain. No, it won't break anything, but it won't work either. This is not an unreasonable thing to mention. Lots of new CSS features are about progressive enhancement. This is not different. It's still important for developers to keep in mind what works and when/where, and what doesn't. The world is not just Chrome/Blink. @zeh These features are part of official CSSWG resolutions and are ready for other vendors to implement. Sometimes Chrome implements something first, and sometimes Chrome is last. Here, Chrome happens to be first. The thing with Progressive Enhancement is that you don’t have to care about what works when or where. You put a solid good working base experience in place that works out of the box. But if the browser supports more than just that base, they get a better experience. A common piece of feedback I receive on this one is “it’s Chrome-only, so I won’t use it”. Here’s the kicker: that doesn’t really matter here, as it’s a nice #ProgressiveEnhancement: Browsers without support get the status quo. Browsers with support get the nice transition. At worst you make the experience better in browsers with support. https://developer.chrome.com/docs/css-ui/animate-to-height-auto/  @bramus People really don't seem to know about progressive enhancement in 2024 By opting-in today, you’re future proofing your code: once other browsers add support for it, their users too will get the nice experience. A free upgrade, hooray! For you as a developer that means no fallbacks or polyfills to include; just sit back & relax and let the browsers work on it. @bramus I've been using the display:grid trick: https://terminal.space/tech/adding-a-sliding-animation-in-2024-why-is-this-so-hard/ Once this proposal gets broad compatibility, it would be a nice addition. |
@bramus if it is recommended to be set on `:root`, then why isn't it just part of the UA stylesheet?