Mastodawn

Michael Klöpzig Oct 9

CSS is kinda fabulous r/n. I've got this nested table of contents for a page that's sticky along the side as you scroll, list of links and details/summaries with nested lists, that is both a scrollspy with whatever is currently visible, but also automatically opens and closes the details! ALL WITHOUT JAVASCRIPT.

A wonderful combo of scroll-target-group and :target-current for the scrollspy, ::details-content w/content-visible for the details opening, a healthy use of :has, and ofc pos: sticky.

H/T to both @Una and @bramus who both happened to have blog posts/GH issue comments that shared solutions for these recently that I was then able to combine into this monstrosity of a page subnav.

Haha! Throw the whole sidebar into a `details` and add a style query, and with the same magic, you've now got a _transforming_ menu that goes from collapsable view to wide open view depending on where you place it and the layout it's in!

This, friends, is why I still build complex personal projects for fun. I get to see just what the web can do today in an open canvas.

This is what I'm talking about with throwing it into a `details` element; I've literally built this component before on production sites, lamenting that fundamental interactions change between viewports and needing lots of extra markup and JavaScript to make it happen. Now, it’s literally just a couple lines of CSS to hide the control and force the `details` open—everything else about the component stays the same.

I love it.

#css #html #webdev #webdesign

Zach Leatherman Sep 25

@snugug …wait how are you forcing details state without JS?

@zachleat I think you saw it in my other toot but ::details-content w/content-visible and height: auto !important

benschwarz Sep 25

@snugug @zachleat I also learnt that you can add a name to details, if there’s another with the same name, opening one will collapse another 🙇‍♂️

Zach Leatherman Sep 26

@snugug this is life changing stuff, thank you

@zachleat haha you're welcome. Thank @bramus who I took this from in a GitHub issue thread. I haven't tested the accessibility of this,. FYI

@snugug @zachleat I'm not an expert in all this but I bet there's some ARIA roles that need to be synced up based on the ::details-content being visible or not.

My StyleObserver could help set that up: https://github.com/bramus/style-observer

GitHub - bramus/style-observer: MutationObserver for CSS. Get notified when the computed value of a CSS property changes.

MutationObserver for CSS. Get notified when the computed value of a CSS property changes. - bramus/style-observer

GitHub

benschwarz Sep 25

@snugug nice work, looking good

Bryan Schuetz Sep 24

@snugug Makes me think of @Hakim.se ole progress nav for page outlines...

@snugug Very slick! Where can I find this project? 🤩

@flerox Glad you like it! The project is private right now, just a little thing I'm working on for me and my friends, but if I ever finish it/get it to a place I'm happy sharing it, I will!

@snugug Fair enough! I will try to copy that at some point though - it’ll be a super cool thing to have on ex any docs site.

@snugug neat! But I don’t supposed these highlights come with accessibility markers like aria-current states without JavaScript?

Olivier Forget Sep 25

@muan @snugug Bingo. That's what I ran into when I did a pure-CSS collapsible menu. It worked great, but the accessibility stuff requires JS. Still a win overall, but frustrating.

@teleclimber @muan it's built on top of details, which I thought has accessible states built in for open/closed. The force open with CSS I haven't tested yet, though.

Olivier Forget Sep 25

@snugug @muan Ah maybe I need to look into details and shove my menu in there.

@teleclimber @muan I do think I need to add a button around my custom marker, though, as tab goes to the link in the summary instead of just letting you open and close it. That's my next thing I'm going to do.

@teleclimber @muan So as always, @SaraSoueidan has a wonderful writeup on the accessibility of the scrollspy technique (https://www.sarasoueidan.com/blog/css-scrollspy/) and it looks like there's a CL that's landed (but not yet in stable) to correctly add aria-current automatically https://chromium-review.googlesource.com/c/chromium/src/+/6853905. The CSS trick doesn't correctly communicate that the disclosure is expanded (at least in VO), maybe another CL like the former can help make that happen here, too.

CSS-only scrollspy effect using scroll-marker-group and :target-current

— The personal website of Sara Soueidan, inclusive Web UI engineer

Sara Soueidan Sep 29

@snugug Ahh I didn't know it is already merged. I'll add a note to test again after a while. (Right now still not resolved)

@snugug appreciate you tracking this down!

@snugug that’s so cool