我注意到在许多模板引擎中，在HTML5样板文件、各种框架和普通的PHP站点中，都有添加到标记上的no-js类。
为什么要这样做？是否有某种默认浏览器行为对此类做出反应？为什么总是包括它？如果没有"no-js"案例和HTML可以直接寻址，那么这不会使类本身过时吗？
以下是html5样板文件index.html中的示例：
1
2
3
4
5
| <!--[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]--> |
如您所见，元素将始终具有此类。有人能解释为什么经常这样做吗？
当modernizer运行时，它将删除"no js"类并将其替换为"js"。这是一种应用不同CSS规则的方法，具体取决于是否启用了JavaScript支持。
请参阅现代化程序的源代码。
- 这里还有另一篇很棒的文章：alistaparate.com/articles/&hellip；
- 由于Modernizer将"no js"替换为"js"，因此可以将其用作在CSS代码中执行if/else语句的等效方法。例如，.myclass { /* CSS code for all versions of your page goes here */ }、.js .myclass { /* This CSS code will only show up if JS is enabled */ }和.no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }。希望这有帮助。- Nick
- 这有点烦人，因为HTML标记不应该分配任何类名。
- @ringo:html 5指定任何元素都可以具有class属性。虽然从技术上讲，HTML4没有，但是没有一个浏览器会阻塞它；即使那些不支持它的浏览器也会忽略它，而且我已经多年没有见过这样的浏览器了。
- 把它添加到标签中并省去麻烦，这会是相同的吗？
- @胡安，这可能会造成更多的麻烦。将类与body一起使用，而不是使用任何其他元素，这样做是不同的：(body.js与.js p)。另外，正如赵亮所指出的，把它放在身上实际上并不能省去任何麻烦。
- @扎克尔？把它放在身上并使用相同的CSS代码有什么问题(.js p)
- @wired-in-imagin您希望向元素添加填充。你必须做body.js{padding:...}，而你可以做.js element {padding:...}(.js body...)的任何其他元素都不起作用，这是一个小问题，但它只是稍微一致一点，而且通过扩展，效果更好。
- @扎克，我知道我一定在这里抽烟，但在我看来，.js { padding: ...}是很好的，因为你知道，作为一个执行它的人，body=0.js。更直接地说，你似乎在说，我不明白的是，body.js比.js body更糟……
- @此外，如果你唯一的论点是，每次引用.js时，它都应该保持一致，并且包含一个子类或子元素，比如.js element，那么你的行为就像从来没有人向html元素添加css一样。认为CSS重置和默认样式，所以同样的逻辑也适用于这里。我真的不知道你从哪里来。只要知道根元素是body，就不会有任何危害。您唯一的问题是，如果您必须向html元素添加样式，并且只有当html元素具有.js或.no-js时才需要添加样式。
- @把它放在上，会给你带来什么好处？
- @扎克，我看不出有什么额外的好处，但是像你说的那样，把它放在上当然没有什么错。你得到的好处和把它放在上一样。
- @Zachl这并不是什么大问题，但是将class属性放在html标签上会有一点好处，那就是html<5规范兼容。我对这件事的任何其他论点一点也不动摇。
- 值得一提的是，HTML5样板文件把它放在了上，而且还没有任何关于这一点的报道。不知何故，把它放在上已经成为一种既定的做法，人们立刻知道它是什么，它做什么。最后，背离这种做法只会引发更多的问题。
- 这是一个很好的观点。现在改变它会产生不必要的问题，而且效益微乎其微。
- @曹，你知道江户十一〔28〕是什么意思吗？
- @stom：表示document元素(基本上是根节点)有一个名为"default的类。就是这样。浏览器不太关心类；它们使脚本和样式表更容易使用。对页面功能或外观的唯一更改是JS和/或CSS导致的更改。
现代化功能检测库使用no-js类。当现代化器加载时，它用js替换no-js。如果禁用了javascript，则类将保留。这允许您编写容易针对任何一个条件的CSS。
从现代化者的状态来源(不再保持)：
Remove"no-js" class from element, if it exists:
docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';
以下是Paul Irish的博客文章，描述了这种方法：http://www.paulirish.com/2009/avointing-the-fouc-v3/
我喜欢做同样的事情，但是没有现代化。我把下面的放在中，如果启用了javascript，将类更改为js。比起regex版本，我更喜欢使用.replace("no-js","js")，因为它不那么神秘，适合我的需要。
1
2
| document.documentElement.className =
document.documentElement.className.replace("no-js","js"); |
在使用这种技术之前，我通常只将依赖于JS的样式直接应用于JavaScript。例如：
1
2
| $('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'}); |
使用no-js技巧，现在可以使用css实现：
1
2
3
| .js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green } |
最好这样做，因为：
- 它加载速度更快，无FOUC(非样式内容闪烁)
- 分离关注点等…
- 不过，使用regexp的现代化版本更安全(可能更快)。
- @安德烈夫-你能把这方面再扩展一点吗？它到底有多安全？
- @zachl regexp版本(与\b不匹配)与anno-jsus不匹配，另一个版本则改为anjsus。no-js不是任何类名的典型子字符串，但在这方面，它与\bs"更安全"。
modernizer.js将删除no-js类。
这允许您为.no-js something生成CSS规则，仅当禁用javascript时才应用这些规则。
no-js类被一个javascript脚本删除，因此如果禁用JS，您可以使用CSS修改/显示/隐藏内容。
- 你说"no-js类被一个javascript脚本删除"。因此，如果禁用了javascript，它是如何工作的(能够删除'no js'类)。你能告诉我清楚吗？
- 您是对的，这实际上就是重点：如果禁用了javascript，类将保持不变，例如，您可以使用CSS显示一些HTML部分来警告用户。.no-js #js-warning {display: block;}
- 请注意，在Modernizer完成此操作后，可能会发生JS错误，因此测试JS的方法并不简单。
这不仅适用于现代化。我看到下面的一些站点实现来检查它是否支持javascript。
1
2
3
4
| <body class="no-js">
document.body.classList.remove('no-js');
...
</body> |
如果有javascript支持，那么它将删除no-js类。否则，no-js将保留在body标签中。然后，当没有JavaScript支持时，它们控制CSS中的样式。
1
2
3
| .no-js .some-class-name {
} |
查看Moderner中的源代码，本节：
1
2
3
4
5
6
| // 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');
} |
所以基本上它搜索classprefix+no-js类，并用classprefix+js替换它。
如果javascript不在浏览器中运行，那么它的使用方式也会有所不同。
no js类用于设置网页样式，具体取决于用户是否在浏览器中禁用或启用了js。
根据现代化文件：
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.