Published: October 7, 2025
14
72
1.3k

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

@jh3yy can the same apply for using details/summary elements?

@marutchell you could – but it's a little different as you want the ::details-content pseudo for that to be a nice experience

@jh3yy remember when height used to be absolutely evil to deal with without js

@dandigangi fr 💯

@jh3yy Will this work for the details component as well. Probably will but just confirming it.

@it_s_me_mohit this one is "trickier" because we're relying on the ::details-content pseudo to get cross-browser support then we can do stuff with interpolate-size 👨‍🍳

@jh3yy how do you show the keys that are getting used on top of the screen (with event listeners and showing and highlighting them with css or with the recorder that you are using ?)

@jh3yy Any reason to not use interpolate-size?

@jh3yy Would using the new view transition api be a good substitute for this approach?

@jh3yy Nice tip considering transitioning height property is a pain in the b***t.

@jh3yy What’s the trigger in CSS, from inert to default?

@jh3yy devilish!

@jh3yy This is 🔥🔥🔥🔥🔥

@jh3yy I will just repeat my question (⁠◔⁠‿⁠◔⁠) https://x.com/HamzaSyrage/stat...

@jh3yy Do you have a demo of this somewhere? I'm obsessed with it

@jh3yy Another banger. Every time I’m like, “Wow, CSS is wildly powerful.” 🔥

Share this thread

Read on Twitter

View original thread

Navigate thread

1/17