Una Kravets
@una.im
Making the web more stylish ✨🎨 DevRel Lead for CSS & Web UI @ Google Chrome. Cohost of the CSS Podcast & host of Designing in the Browser. 🌎 una.im
Hmm good question, You can use the scrollable scroll state query there:
@container scroll-state(scrollable: bottom)
@container scroll-state(scrollable: bottom)
January 12, 2026 at 3:44 PM
Hmm good question, You can use the scrollable scroll state query there:
@container scroll-state(scrollable: bottom)
@container scroll-state(scrollable: bottom)
Sure, I think in one of my demos I show the check for before you scroll
@container scroll-state(scrolled: none)
Indicates no scroll has occurred yet
@container scroll-state(scrolled: none)
Indicates no scroll has occurred yet
January 11, 2026 at 10:09 PM
Sure, I think in one of my demos I show the check for before you scroll
@container scroll-state(scrolled: none)
Indicates no scroll has occurred yet
@container scroll-state(scrolled: none)
Indicates no scroll has occurred yet
You could nest these (the stuck inside of the scrolled)
January 10, 2026 at 2:56 PM
You could nest these (the stuck inside of the scrolled)
Reposted by Una Kravets
Learn all about invoker commands on The CSS Podcast → goo.gle/4j07GQ3
@bram.us and @una.im explore how command and commandfor attributes declaratively open dialogs and show popovers, cover standard and custom commands, and dive into "interest invokers."
@bram.us and @una.im explore how command and commandfor attributes declaratively open dialogs and show popovers, cover standard and custom commands, and dive into "interest invokers."
January 7, 2026 at 4:30 PM
Learn all about invoker commands on The CSS Podcast → goo.gle/4j07GQ3
@bram.us and @una.im explore how command and commandfor attributes declaratively open dialogs and show popovers, cover standard and custom commands, and dive into "interest invokers."
@bram.us and @una.im explore how command and commandfor attributes declaratively open dialogs and show popovers, cover standard and custom commands, and dive into "interest invokers."
Definitely add @nerdy.dev @bram.us @kizu.dev @utilitybend.com @joshwcomeau.com @ishadeed.com @css-only.dev @lea.verou.me (there’s so many this is just immediately what’s off the top of my head/feeds I follow)
January 7, 2026 at 7:09 PM
Definitely add @nerdy.dev @bram.us @kizu.dev @utilitybend.com @joshwcomeau.com @ishadeed.com @css-only.dev @lea.verou.me (there’s so many this is just immediately what’s off the top of my head/feeds I follow)
Yes! I can give you some recs. Lots of great web devs I follow. I also started doing email notifications for RSS so I don’t miss things for a select few :)
January 6, 2026 at 8:29 PM
Yes! I can give you some recs. Lots of great web devs I follow. I also started doing email notifications for RSS so I don’t miss things for a select few :)
Is it the colors one?! Great read!
January 6, 2026 at 8:00 PM
Is it the colors one?! Great read!
Nothing like that new year, fresh inbox feeling
January 5, 2026 at 4:14 PM
Nothing like that new year, fresh inbox feeling
My biggest productivity life hack is: writing things down
December 30, 2025 at 4:01 AM
My biggest productivity life hack is: writing things down
I also think @bram.us has a hack for scroll-triggering with scroll driven animation which would have (at least a-single-version-of-chrome better browser support)
December 23, 2025 at 6:22 PM
I also think @bram.us has a hack for scroll-triggering with scroll driven animation which would have (at least a-single-version-of-chrome better browser support)
Here's a demo doing what you're asking: codepen.io/una/pen/wBWv...
It has a header that stays in position until it reaches 40px of scroll. Then, at 40px, it animates away. When you start to scroll back up, the header animates back in.
I am off today but easily nerd-sniped 😆
It has a header that stays in position until it reaches 40px of scroll. Then, at 40px, it animates away. When you start to scroll back up, the header animates back in.
I am off today but easily nerd-sniped 😆
Progressively Enhanced hidey bar with scroll-state(scrolled) + scroll-triggered animations start at 40px
...
codepen.io
December 23, 2025 at 5:57 PM
Here's a demo doing what you're asking: codepen.io/una/pen/wBWv...
It has a header that stays in position until it reaches 40px of scroll. Then, at 40px, it animates away. When you start to scroll back up, the header animates back in.
I am off today but easily nerd-sniped 😆
It has a header that stays in position until it reaches 40px of scroll. Then, at 40px, it animates away. When you start to scroll back up, the header animates back in.
I am off today but easily nerd-sniped 😆
I see, so you want it to trigger on scroll direction but you don’t want it to start until 40px down? Maybe you can still use scroll-triggered animations to apply a custom property value for the translation amount at a trigger point, then override it with scroll state queries
December 23, 2025 at 5:10 PM
I see, so you want it to trigger on scroll direction but you don’t want it to start until 40px down? Maybe you can still use scroll-triggered animations to apply a custom property value for the translation amount at a trigger point, then override it with scroll state queries
Reposted by Una Kravets
Man, I love that view transitions make things like this possible with only a few lines of code. 🥰
December 22, 2025 at 2:27 PM
Man, I love that view transitions make things like this possible with only a few lines of code. 🥰
Reposted by Una Kravets
Directional CSS with scroll-state(scrolled). @una.im shows how the new scroll-state() container query landing in Chrome 144 will let CSS respond to scroll direction for dynamic UI effects, all without JS. #css #scroll
una.im/scroll-state...
una.im/scroll-state...
December 23, 2025 at 11:01 AM
Directional CSS with scroll-state(scrolled). @una.im shows how the new scroll-state() container query landing in Chrome 144 will let CSS respond to scroll direction for dynamic UI effects, all without JS. #css #scroll
una.im/scroll-state...
una.im/scroll-state...
See also “Workday” and name@ 😆
December 18, 2025 at 2:25 AM
See also “Workday” and name@ 😆
Interesting idea. I proposed isolation mode a while back for devtools
December 17, 2025 at 11:31 PM
Interesting idea. I proposed isolation mode a while back for devtools
Landing next month in Chrome 144: scroll-state(scrolled)
This new scroll query value lets you style your UI based on the most recent scroll direction.
This means you can change animation-direction based on last scroll & implement directional UI like "hidey-bars"
Learn more: una.im/scroll-state...
This new scroll query value lets you style your UI based on the most recent scroll direction.
This means you can change animation-direction based on last scroll & implement directional UI like "hidey-bars"
Learn more: una.im/scroll-state...
una.im | Directional CSS with scroll-state(scrolled)
Style based on scroll direction with this new scroll-state query feature.
una.im
December 17, 2025 at 9:02 PM
Landing next month in Chrome 144: scroll-state(scrolled)
This new scroll query value lets you style your UI based on the most recent scroll direction.
This means you can change animation-direction based on last scroll & implement directional UI like "hidey-bars"
Learn more: una.im/scroll-state...
This new scroll query value lets you style your UI based on the most recent scroll direction.
This means you can change animation-direction based on last scroll & implement directional UI like "hidey-bars"
Learn more: una.im/scroll-state...
Progressively Enhanced hidey bar with scroll-state(scrolled)
...
codepen.io
December 17, 2025 at 8:09 PM
I think I had a similar post a few weeks ago 😆
December 17, 2025 at 12:41 AM
I think I had a similar post a few weeks ago 😆