What is the use of the HTML “no-js” class

Published on Author Code Father
Use of the HTML “no-js” class

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.

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…

Comments

comments