javascript – What is the purpose of the HTML no-js class?

javascript – What is the purpose 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 Modernizers 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-jsb/,) + 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…

javascript – What is the purpose of the HTML no-js class?

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.

Leave a Reply

Your email address will not be published.