HTML“no-js”类的目的是啥？
Posted
技术标签:
【中文标题】HTML“no-js”类的目的是啥？【英文标题】：What is the purpose of the HTML "no-js" class?HTML“no-js”类的目的是什么？ 【发布时间】：2011-10-07 03:50:34 【问题描述】：我注意到在许多模板引擎中，在html5 Boilerplate、各种框架和普通php 站点中，no-js 类添加到<HTML> 标记上。
为什么要这样做？是否有某种默认浏览器行为会对此类做出反应？为什么总是包含它？如果没有 no-"no-js" 的情况并且可以直接处理 html，那是否不会使类本身过时？
这是 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]-->
如您所见，<html> 元素将始终具有此类。
有人可以解释为什么经常这样做吗？
【问题讨论】：
【参考方案1】：Modernizr.js 将删除 no-js 类。
这允许您为 .no-js something 制定 CSS 规则，以便仅在禁用 javascript 时应用它们。
【讨论】：
【参考方案2】：Modernizr 运行时，它会删除“no-js”类并将其替换为“js”。这是一种根据是否启用 Javascript 支持来应用不同 CSS 规则的方法。
见Modernizer's source code。
【讨论】：
这里还有一篇很棒的文章：alistapart.com/articles/… 由于 Modernizr 将“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. */ 。希望这可以帮助。 -尼克
@Ringo：HTML 5 指定 any 元素可以具有class 属性。尽管 HTML 4 在技术上没有，但没有浏览器阻塞它；即使是那些不支持它的也只是忽略它，而且我已经好几年没见过这些浏览器了。
@ZachL 我意识到我一定是在这儿抽烟，但在我看来.js padding: ... 很好，因为你知道body = .js 是实现它的人。更直接地说，您似乎声称body.js 比我没有关注的.js body 更糟糕......
值得一提的是 html5-boilerplate 将其放在 <html> 上，并且从未报告过任何问题。不知何故，将它放在<html> 上已成为一种既定做法，人们立即知道它是什么以及它做了什么。最后，偏离这种做法只会引发更多问题。【参考方案3】：
no-js 类被 javascript 脚本删除，因此如果 js 被禁用，您可以使用 css 修改/显示/隐藏内容。
【讨论】：
您说“no-js 类被 javascript 脚本删除”。那么 Javascript 是如何工作的（能够删除 'no-js' 类）如果它被禁用。能不能给我个清楚？ 你是对的，这实际上是重点：如果 JavaScript 被禁用，该类将保留，例如，您可以使用 CSS 显示一些 html 部分来警告用户。.no-js #js-warning display: block;
请注意，在 Modernizr 完成此操作后可能会发生 JS 错误，因此它不是测试 JS 运行的万无一失的方法【参考方案4】：
no-js 类由Modernizr 特征检测库使用。当 Modernizr 加载时，它会将 no-js 替换为 js。如果 JavaScript 被禁用，该类仍然存在。这使您可以编写轻松针对任一条件的 CSS。
来自Modernizrs' Anotated Source(no longer maintained)：
从元素中删除“no-js”类（如果存在）：
docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';
下面是 Paul Irish 的一篇博客文章，描述了这种方法： http://www.paulirish.com/2009/avoiding-the-fouc-v3/
我喜欢做同样的事情，但没有 Modernizr。
如果启用了 JavaScript，我将以下 <script> 放入 <head> 以将类更改为 js。我更喜欢使用 .replace("no-js","js") 而不是正则表达式版本，因为它不那么神秘并且适合我的需要。
<script>
document.documentElement.className =
document.documentElement.className.replace("no-js","js");
</script>
在使用这种技术之前，我通常只使用 JavaScript 直接应用 js-dependant 样式。例如：
$('#someSelector').hide();
$('.otherStuff').css('color' : 'blue');
使用no-js 技巧，现在可以使用css 完成：
.js #someSelector display: none;
.otherStuff color: blue;
.no-js .otherStuff color: green
这是更可取的，因为：
加载速度更快，没有 FOUC（无样式内容的闪存） 关注点分离等...【讨论】：
不过，使用 RegExp 的 Modernizr 版本更安全（而且可能更快）。 @AndrewF - 你可以扩展一下吗？它到底有多安全？ @ZachL 正则表达式版本（带有\b）与anno-jsus 不匹配，另一个将其更改为anjsus。 no-js 不是任何类名的典型子字符串，但在这方面，\bs 仍然“更安全”。【参考方案5】：
这不仅适用于 Modernizer。我看到一些类似下面的网站实现来检查它是否支持javascript。
<body class="no-js">
<script>document.body.classList.remove('no-js');</script>
...
</body>
如果有 javascript 支持，那么它将删除 no-js 类。否则no-js 将保留在正文标记中。然后在不支持 javascript 时控制 CSS 中的样式。
.no-js .some-class-name
【讨论】：
【参考方案6】：查看Modernizer中的源码，本节：
// 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 不在浏览器中运行，那么使用它的样式会有所不同。
【讨论】：
【参考方案7】：no-js 类用于设置网页样式，取决于用户是否在浏览器中禁用或启用了 JS。
根据Modernizr docs：
无js
默认情况下，Modernizr 将重写
<html class="no-js"> to <html class="js">。这可以让隐藏某些应该只存在的元素 暴露在执行 JavaScript 的环境中。如果你想 禁用此更改，您可以将 enableJSClass 设置为 false 配置。
【讨论】：
以上是关于HTML“no-js”类的目的是啥？的主要内容，如果未能解决你的问题，请参考以下文章