undefined | Better HN

0 pointsy4mi4y ago0 comments

Ha, when I first learned about it I remade a pretty interesting navigation menu purely with :not :checked :focused :hover etc, so pure html and css, thinking it would be more performant then my previous JS version.

Its performance was not just measurably worse, it was obvious as soon as I opened the revision on my phone.

Lesson learned: it's important to think twice before using most pseudo selectors

0 comments

Kavelach4y ago

> I remade a pretty interesting navigation menu purely with :not :checked :focused :hover etc, so pure html and css, thinking it would be more performant then my previous JS version.

That sounds so cool! Do you have a version somewhere that I can take a look at? I always like fiddling with clever CSS, even if it is too clever for its own sake, as you managed to find out

And keep in mind, that pseudo selectors are not created equal. Things like :checked or :focused usually don't have that much of a performance impact

y4miOP4y ago

Sadly no, I tried for a while until I finally threw in the towel at some point.

I think you're overestimating what I did though, the basic idea is this recreation.

https://codepen.io/wohlben/pen/gOGKejv

it was just a lot more elements in the navigation with subcategories etc, but basically the same methods

(remember to check the mobile view, as thats the one thats using most selectors. Though the desktop view is arguably better)

this recreation is probably very confusing though, as the only hint that there are more links hidden for the category are the missing corners - and there is nothing hinting you have to click the category names to show these hidden options. and i skimped on proper accessibility for this mockup, so the hidden options can't be selected without touch/mouse

The JS just emulates what opening the page would have done. It was SSR

j / k navigate · click thread line to collapse