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!
👋 Hi there! I'm Amit. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!
