The basic vehicle for reacting to disabled scripts has long been the
<noscript> tag - an inelegant vestige from simpler days which can do little else than load a banner requiring users to enable scripts in order to proceed (don't do that!); or, a little better - a 'no js' stylesheet:
<noscript><link rel="stylesheet" href="nojs.css"></noscript>
However, you can easily make your main stylesheet JS-aware, not to mention save a request, if you ditch the <noscript> and begin your HTML with the following code instead:
<html class="no-js"> <head> <script> var _h = document.getElementsByTagName("html"); _h.className = _h.className.replace(/\bno-js\b/,'has-js'); </script>
All this does is replace the
no-js class name with
no-js class would stick. In fact, the HTML5 Boilerplate does something quite similar.
Now you can use the
.has-js selectors in your CSS and style elements accordingly. As always, bear progressive enhancement in mind when building your pages: even if your application relies strongly on client-side scripting, there is a tangible performance benefit of rendering a page's initial contents on the server. For more discussion on that subject, check out Nicholas Zakas' quite sobering presentation.