![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
javascript - What is the purpose of the HTML "no-js" class?
... The
314 73 | 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: |
As you can see, the
<html> element will always have this class. Can someone explain why this is done so often?asked Jul 17 '11 at 14:35 |
5 Answers
When Modernizr runs, it removes the "no-js" class and replaces it with "js". This is a way to know in your CSS whether or not Javascript support is enabled.
answered Jul 17 '11 at 14:37 |
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.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...
answered Sep 13 '12 at 16:22 |
http://stackoverflow.com/questions/6724515/what-is-the-purpose-of-the-html-no-js-class
Modernizr: практическое применение
http://habrahabr.ru/post/144352/
23 мая 2012 в 04:12
Modernizr: практическое применение
tutorial recovery mode
http://habrahabr.ru/post/144352/
