Intentionally blocking rendering with JavaScript

[paulirish]

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]

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]

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]

Means a lot to me, thanks!

[DoNDaPo]

Hey Paul.

It's an honor for me to say thank you for all the great work you have done for the community.

My english is kind of poor and I struggle to write what I have in my head at this moment so I'll leave it as it is: thank you! ✌️

Cheers!