What is the purpose of the HTML "no-js" class?
The no-js class gets removed by a javascript script, so you can modify/display/hide things using css if js is disabled.
Modernizr.js will remove the no-js class.
This allows you to make CSS rules for .no-js something to apply them only if Javascript is disabled.
The no-js class is used by the Modernizr feature detection library. When Modernizr loads, it replaces no-js with js. If JavaScript is disabled, the class remains. This allows you to write CSS which easily targets either condition.
From Modernizrs' Anotated Source (no longer maintained):
Remove "no-js" class from element, if it exists:
docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';
Here is a blog post by Paul Irish describing this approach: http://www.paulirish.com/2009/avoiding-the-fouc-v3/
I like to do this same thing, but without Modernizr.
I put the following <script> in the <head> to change the class to js if JavaScript is enabled. I prefer to use .replace("no-js","js") over the regex version because its a bit less cryptic and suits my needs.
<script>
document.documentElement.className =
document.documentElement.className.replace("no-js","js");
</script>
Prior to this technique, I would generally just apply js-dependant styles directly with JavaScript. For example:
$('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'});
With the no-js trick, this can Now be done with css:
.js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green }
This is preferable because:
- It loads faster with no FOUC (flash of unstyled content)
- Separation of concerns, etc...
When Modernizr runs, it removes the "no-js" class and replaces it with "js". This is a way to apply different CSS rules depending on whether or not Javascript support is enabled.
See Modernizer's source code.