What is the purpose of the HTML no-js class

Question

I notice that in a lot of template engines  in the HTML5 Boilerplate  in various frameworks and in plain php sites there is the no-js class added onto the  lt HTML gt  tag    Why is this done  Is there some sort of default browser behavior that reacts to this class  Why include it always  Does that not render the class itself obsolete  if there is no no- no-js  case and html can be addressed directly   Here is an example from the HTML5 Boilerplate index html    lt  -- if lt IE 7   gt   lt html lang  en  class  no-js ie6  gt   lt   endif -- gt   lt  -- if IE 7   gt      lt html lang  en  class  no-js ie7  gt   lt   endif -- gt   lt  -- if IE 8   gt      lt html lang  en  class  no-js ie8  gt   lt   endif -- gt   lt  -- if IE 9   gt      lt html lang  en  class  no-js ie9  gt   lt   endif -- gt   lt  -- if  gt IE 9    IE   gt  lt  -- gt   lt html lang  en  class  no-js  gt   lt  -- lt   endif -- gt    As you can see  the  lt html gt  element will always have this class  Can someone explain why this is done so often

User · Answer

The no-js class is used to style a webpage, dependent on whether the user has JS disabled or enabled in the browser.

As per the Modernizr docs:

no-js

By default, Modernizr will rewrite <html class="no-js"> to <html class="js">. This lets hide certain elements that should only be exposed in environments that execute JavaScript. If you want to disable this change, you can set enableJSClass to false in your config.

User · Answer

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

User · Answer

This is not only applicable in Modernizer  I see some site implement like below to check whether it has javascript support or not    lt body class  no-js  gt       lt script gt document body classList remove  no-js    lt  script gt           lt  body gt    If javascript support is there  then it will remove no-js class  Otherwise no-js will remain in the body tag  Then they control the styles in the css when no javascript support    no-js  some-class-name

User · Answer

The no-js class gets removed by a javascript script  so you can modify display hide things using css if js is disabled

User · Answer

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  lt script gt  in the  lt head gt  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    lt script gt      document documentElement className           document documentElement className replace  no-js   js     lt  script gt    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

User · Answer

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

User · Answer

Look at the source code in Modernizer  this section      Change  no-js  to  js   independently of the  enableClasses  option     Handle classPrefix on this too if  Modernizr  config enableJSClass      var reJS   new RegExp       s     classPrefix    no-js   s         className   className replace reJS    1    classPrefix    js 2        So basically it search for classPrefix   no-js class and replace it with classPrefix   js   And the use of that  is styling differently if JavaScript not running in the browser

[javascript] What is the purpose of the HTML "no-js" class?

Examples related to javascript

Examples related to html

Examples related to modernizr

Examples related to html5boilerplate