I’ve tried my best to make sure that this site works great (or at least reasonably well) even without JavaScript, but when JavaScript isn’t available, it can be a little clunky to hide things that do require it. With a mere 7 lines (or a one-liner if you’re nasty), you can easily hide elements that require JavaScript so that you don’t end up with broken functionality visible to users who have JavaScript off. For context, I’m working on a small share button that I can add to my posts that makes it easy to share my posts however you’d prefer. So here’s an example of what that looks like right now without JavaScript: While it doesn’t look hideous, the link isn’t necessary when JavaScript is enabled, and the SVG isn’t necessary when JavaScript is disabled. I wanted to just show the SVG as a button you can press when JavaScript is enabled, and just show the link to make it easy to copy/paste when JavaScript is disabled. If you’re not already familiar, the latter part is easy with the <noscript> HTML tag. This tag tells browsers to render its contents only when JavaScript is disabled. So making the link only show up when JavaScript is disabled is as easy as wrapping it in a <noscript> tag. But if you want to make an element only appear when JavaScript is enabled, it’s a little less clear cut. There’s not an <onlyscript> tag, and the <script> tag has a very different meaning than the <noscript> tag. Using JavaScript to indicate JavaScript is enabled In my first approach with this, I thought maybe I could just add a line of JavaScript in the <head> tag that, if JavaScript is enabled, would run and add js-enabled to the class list on the <html> element. This would work fine, then I could style things in a special way if JavaScript is enabled, by creating styles like this: .share-button { display: none; } .js-enabled .share-button { display: block; } But this felt clunky. It results in needing to create two CSS rules for each element, and for my goal of just hiding things whe...
First seen: 2025-04-06 18:15
Last seen: 2025-04-06 21:15