CSS that depends upon JavaScript
If there are two things without which you can’t imagine a modern website, these must be JavaScript and CSS and most of the time, both of these can co-exist and perfectly work in isolation.
But there might be some scenarios where one of these technologies can be dependent on one another.
Adam Argyle has recently explained a scenario where it’d be nice if we can control the CSS when the JavaScript is disabled in the browser.
The idea here is to use the Noscript element
<noscript>that defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
So, for instance, if we want some CSS to be inserted only when the scripting is turned off in the client’s browser, here’s how we can do it.
<noscript>
<style>
.hide-if-no-js {
display: none;
}
</style>
</noscript>
This can come in handy in certain situations. Like Adam mentioned, we can hide arrow control from a scroller when the scripting is turned off and show it otherwise!
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
