2025-04-06 12:28:00
0xda.de
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 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 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 tag has a very different meaning than the 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 tag that, if JavaScript is enabled, would run and add js-enabled to the class list on the 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 when JavaScript isn’t enabled, that seems heavy handed.
This might be a useful solution if you needed to do significantly more elaborate styling only when JavaScript is enabled, but for my purpose, it wasn’t simple enough.
Using noscript to override specific elements
The next solution I came to was to combine the use of the tag with a tag in the head of my site. Then I could just list out elements that I don’t want to show, and mark them explicitly as display:none;. They would still be present in the markup, but that’s fine, they shouldn’t get in anybody’s way.
In your site’s header, you can simply link all of your CSS as you normally would, and then add the following snippet to override the fields that you want to not show when JavaScript is disabled. In my example, I was hiding the .theme-toggle and the .menu-trigger classes. These are related to features that only work if JavaScript is enabled – the three way theme switcher and the hamburger menu dropdown on mobile.
noscript>
style>
.theme-toggle {
display: none;
}
.menu-trigger {
display:none;
}
style>
noscript>
This is alright. It’s explicit. It relies on existing browser behaviors to do selective style overrides when JavaScript isn’t available, so you don’t have to style both the JS-enabled and JS-disabled cases explicitly. But as I was developing new progressive enhancement features, I didn’t really like this pattern anymore. The more enhanced the website becomes, the longer this list of overrides becomes, and you have to make sure you always keep it up to date if you change class names.
⭐ Using noscript and a d-js-required class.
Since we can append any number of classes to an element, I realized that it makes much more sense to make this noscript-style as simple as possible. We’ll simply create a single class, d-js-required to indicate that JavaScript needs to be enabled for us to display this element. We can update our block with just a single class, and then update our existing elements to also use this class.
noscript>
style>
.d-js-required {
display: none;
}
style>
noscript>
So now we can have any number of simple elements that only get displayed when JavaScript is enabled, without writing another line of JavaScript, and without needing to maintain an ever-growing list of CSS overrides.
I hope this has given you some inspiration for creative solutions to solve progressive-enhancement problems. If you have JavaScript enabled, you can click the share button below to share this page! And if not, you can just copy the link down below to share this page!
Keep your files stored safely and securely with the SanDisk 2TB Extreme Portable SSD. With over 69,505 ratings and an impressive 4.6 out of 5 stars, this product has been purchased over 8K+ times in the past month. At only $129.99, this Amazon’s Choice product is a must-have for secure file storage.
Help keep private content private with the included password protection featuring 256-bit AES hardware encryption. Order now for just $129.99 on Amazon!
Help Power Techcratic’s Future – Scan To Support
If Techcratic’s content and insights have helped you, consider giving back by supporting the platform with crypto. Every contribution makes a difference, whether it’s for high-quality content, server maintenance, or future updates. Techcratic is constantly evolving, and your support helps drive that progress.
As a solo operator who wears all the hats, creating content, managing the tech, and running the site, your support allows me to stay focused on delivering valuable resources. Your support keeps everything running smoothly and enables me to continue creating the content you love. I’m deeply grateful for your support, it truly means the world to me! Thank you!
|
BITCOIN
bc1qlszw7elx2qahjwvaryh0tkgg8y68enw30gpvge Scan the QR code with your crypto wallet app |
|
DOGECOIN
D64GwvvYQxFXYyan3oQCrmWfidf6T3JpBA Scan the QR code with your crypto wallet app |
|
ETHEREUM
0xe9BC980DF3d985730dA827996B43E4A62CCBAA7a Scan the QR code with your crypto wallet app |
Please read the Privacy and Security Disclaimer on how Techcratic handles your support.
Disclaimer: As an Amazon Associate, Techcratic may earn from qualifying purchases.
