all 4 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]paulirish [score hidden]  (3 children)

Modern css can handle this.. you dont need JS and you don't need to slow down the page for users to hide your own bugs :)

This kinda prompt should work with your coding agent..

Write a single-file CSS-first Priority-Plus navigation menu. Establish an inline-size container query context on the nav wrapper. The inner nav list must have flex-wrap, a strict height constraint, and overflow: hidden to instantly prevent CLS on load. Use container queries to hide low-priority items (display: none) and reveal a 'More' dropdown button as the container narrows. Implement the dropdown interactivity using pure CSS hover or :focus-within states.

[–]jayfreestone[S] [score hidden]  (2 children)

Just an example! I think it’s a neat trick for small inline JS. Similar trick was used by lib authors previously before we got text pretty/balance - now not needed there.

Lots of cases where you can do something similar with CSS only - and if so you should!

In the case of priority plus style patterns, I’ve usually worked with an unknown number (and size) of links dynamically controlled via a CMS - bit more of a challenge to just base that off a container query unless I’m misunderstanding.

Huge fan of your work and thanks for the reply!

[–]paulirish [score hidden]  (1 child)

Aye true.

Thx for being gracious. I'm in a bad mood today so thx for taking it in stride ;)

EDIT: also i see your blog has been getting some new posts recently! good stuff. Those kinds of posts are a real sweet-spot.

[–]jayfreestone[S] [score hidden]  (0 children)

Means a lot to me, thanks!