What is the purpose of the HTML "no-js" class?
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 <HTML> 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:
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
As you can see, the <html> element will always have this class. Can someone explain why this is done so often?
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.
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...
\b) doesn't match something like anno-jsus, the other changes it to anjsus. no-js is not a typical substring of any class name, but still in this respect it's "safer" with \bs.
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 gets removed by a javascript script, so you can modify/display/hide things using css if js is disabled.
.no-js #js-warning {display: block;}
This is not only applicable in Modernizer. I see some site implement like below to check whether it has javascript support or not.
<body class="no-js">
<script>document.body.classList.remove('no-js');</script>
...
</body>
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 {
}
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.
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 to . 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.
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- What are valid values for the id attribute in HTML?
- How can I change an element's class with JavaScript?
- What is the !! (not not) operator in JavaScript?
- What does "use strict" do in JavaScript, and what is the reasoning behind it?
- What is the difference between call and apply?
- Why does HTML think “chucknorris” is a color?
- What is the purpose of the "role" attribute in HTML?
- How do I return the response from an asynchronous call?
.myclass { /* CSS code for all versions of your page goes here */ },.js .myclass { /* This CSS code will only show up if JS is enabled */ }and.no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }. Hope this helps. -Nickclassattribute. Although HTML 4 technically doesn't, no browser chokes on it; even the ones that don't support it just ignore it, and i haven't seen one of those browsers in years..js { padding: ...}is just fine since you know as the one who implemented it that body = .js. More directly to your point, it seems you are claiming thatbody.jsis worse than.js bodywhich I am not following...<html>and no issue has ever been reported against that. Somehow putting it on<html>has become an established practice and people immediately know what it is and what it does. In the end, deviating from that practice just raises more questions.