Hiding elements that require JavaScript without JavaScript

There is also CSS media now to detect if is enabled or not. It&#x27; s supported in last 2 versions of most popular browsers.<p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;@media&#x2F;scripting" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;@media&#x2F;scri...</a>

&gt; We’ll simply create a single class, d-js-required to indicate that JavaScript needs to be enabled for us to display this element.<p>You can run some JS to prove you&#x27;re running JS. Can&#x27;t you write in your site&#x27;s CSS:<p><pre><code> .d-js-required { display: none; } </code></pre> and (in JS) remove that class on each element it&#x27;s on?

You can use the hidden attribute.<p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;HTML&#x2F;Global_attributes&#x2F;hidden" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;HTML&#x2F;Global_att...</a>

I did it the other way around. I put this at the start of &lt;body&gt;:<p><pre><code> &lt;script&gt;document.body.classList.add(&quot;hasJS&quot;);&lt;&#x2F;script&gt; </code></pre> And the corresponding CSS:<p><pre><code> .js{display: none;} .hasJS .js{display: block;}</code></pre>

Another solution: wrap the feature in a custom element, use CSS :not(:defined) to hide the element, then in JS register the custom element so it&#x27;s defined and the CSS no longer applies.

Reminds me of the Modernizr JS library from 2009 which would replace &lt;html class=&quot;no-js&quot;&gt; with &quot;js&quot; for this purpose. <a href="https:&#x2F;&#x2F;github.com&#x2F;Modernizr&#x2F;Modernizr&#x2F;blob&#x2F;v1.1&#x2F;modernizr.js#L550">https:&#x2F;&#x2F;github.com&#x2F;Modernizr&#x2F;Modernizr&#x2F;blob&#x2F;v1.1&#x2F;modernizr.j...</a>

<i>And if not, you can just copy the link down below to share this page!</i><p>Or you could just copy it from the address bar?

Major props to the author for actually caring about this. JS seems like an assumption more than ever before. It’s great to see that people understand that some of us don’t want it.<p>Very loosely related: why do so many websites use require Javascript to handle links? I’m so tired of trying to figure out how to open a given link in a new tab. :-(

Reasons to have JavaScript fallbacks in your pages:<p>- Microbrowsers exist. They&#x27;re the things that generate previews in messaging apps and social media.<p>- Ad blockers. Because the advertising on the Web has become a complete dumpster fire even the FBI recommends ad blockers. They can break stupid JavaScript functionality. Partially loaded JavaScript can cause additional load on the back end with retries or missing completion conditions.<p>- Crappy cellular. Cellular data remains unreliable and its reliability is not evenly distributed. A user can go from a great signal to shitty back to great through no fault of their own. You can&#x27;t be guaranteed all your shitty JavaScript will even load.<p>- Spiders. Spiders have varying amounts of support for JavaScript, not everything is some variation on Chrome.

Another option is using JavaScript to inject elements that need JS.

I don&#x27;t get it, we should simply not support users that don&#x27;t have JavaScript enabled. The vast majority of users&#x2F;consumers will have it enabled

Outside of Hacker News or niche companies still supporting IE, progressive enhancement is completely dead.<p>Even for my own projects, I don’t care anymore; there’s a warning to turn it on with a &lt;noscript&gt; tag, and the whole page is otherwise hidden.<p>HN had the eulogy (with some kicking and screaming that it was premature) back in 2013. <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=6316516">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=6316516</a>