Post

Bramus
@bram.us

There’s a new type of CSS scroll-state query coming: “scrolled”. This one remembers the last direction you scrolled into, which you can use to build “hidey bars”: when scrolling down (or having scrolled down), the hidey bar hides itself. When then scrolling back up, the hidey bar reveals itself.

31 reposts220 likes

Bramus
@bram.us

The viewport size is not changing at all here. It's a fixed header that moves out of place. You can use a transition-delay to add a little delay to the act of hiding.

Bramus
@bram.us

I don't see any text being covered here 🤔 Also, I wouldn't call such a bar — where I'd typically put some navigation controls or a search box — useless.

MV
@suzerain.bsky.social

I love when the viewport is scrolled into the perfect position to read, and then the hidey bar slides down and covers the top lines of text.

Bramus
@bram.us

It’s a well established pattern (e.g. www.nngroup.com/articles/sti...). Now you can do this with CSS (no JS!) You get the same A11Y as with the current JS solutions, and perhaps even better as you can do `header:not(:focus-within)` to make sure the header is not out-of-view when tabbing into it.

Muddy Matt
@muddymoles.bsky.social

I know it's a common pattern but not convinced. First, it's an annoying pattern full stop and I can't actually see the use case. Second, a screenreader needs to know the menu is available and is in/out of view. Third, the animation is poor for accessible reasons. I could go on but...

Bramus
@bram.us

The code for the demo is attached to this post. Yes, it’s that easy! You can try it out yourself in Chrome Canary with the experimental Web Platform Features Flag enabled: codepen.io/bramus/pen/q... The feature is expected to ship to Chrome Stable in Chrome 144.

Barry Pollard
@tunetheweb.com

Oh do I recall correctly complaining to you two about some JS running on CSS wrapped last year on every scroll to make the dinosaur turn around? Guess that’s about to get a whole load easier with this!