[Go Make Things] Animating height with only CSS

By rahmat hidayat

Thursday, September 26, 2024

​ I love ditching JavaScript for HTML and CSS whenever I can. It's a core part of the Lean Web Club ethos. In particular, one of my favorite sets of HTML elements are <details> and <summary>, which can be used to create a disclosure or expand-and-collapse component with absolutely no JS. <details> <summary>Show or Hide</summary> <p>This content is hidden by default, and visible when the summary is clicked, tapped, or interacted with using a keyboard.</p> </details> But one of the biggest complaints I've seen about this over the years is that unlike a JavaScript disclosure, there's no way to animate the expanding of the content with CSS using height: auto. We've always had to use absolute heights, which resulted in some weird side-effects, so most folks steered away from it. So, I was delighted when Bramus from the Chrome Dev Rel team posted about a way to finally do this! The tl;dr version: add this to your stylesheet… :root { interpolate-size: allow-keywords; } Then, you can animate the height attribute to auto like we've all wanted to for years! details { height: 1.5rem; transition: height 500ms ease; } details[open] { height: auto; overflow: clip; } It's Chromium-only for now (in my testing, it works in Chrome and Edge work, but not Vivaldi), but a nice bit of progressive enhancement where supported. Here's a demo. Cheers, Chris ​ Want to share this with others or read it later? View it in a browser.​ ​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+