Hiding elements that require JavaScript without JavaScript

Re:Hiding elements that require JavaScript without JavaScript by theandrewbailey on Sunday April 06, 2025 @02:54PM (#43603945)

> We’ll simply create a single class, d-js-required to indicate that JavaScript needs to be enabled for us to display this element.

You can run some JS to prove you're running JS. Can't you write in your site's CSS:

        .d-js-required { display: none; }

and (in JS) remove that class on each element it's on?

[ Parent | on HN ]

Re:Hiding elements that require JavaScript without JavaScript by c0balt on Sunday April 06, 2025 @03:50PM (#43604381)

Wouldn't this lead to a delay of time to first content render? If you rely on display then a layout shift would also be an issue for JS-capable clients.

[ Parent | on HN ]

Re:Hiding elements that require JavaScript without JavaScript by charrondev on Sunday April 06, 2025 @04:39PM (#43604784)

Write that tiny of bit of JS inline in the head and put the class/attribute on the html element.

[ Parent | on HN ]

Re:Hiding elements that require JavaScript without JavaScript by 0xdade on Sunday April 06, 2025 @04:35PM (#43604756)

This is absolutely an option! It gets a little tricky to avoid shifting content around, since it's pretty typical to load styles in the head but load javascript either at the end of the DOM or with the defer tag, so the javascript would likely be running after the user has already seen the layout, and layout shifts could be clunky.

[ Parent | on HN ]