HTML“no-js”类的目的是什么？

IT技术 javascript html modernizr html5boilerplate
2021-03-03 03:29:35

我注意到在很多模板引擎中，在HTML5 Boilerplate 中，在各种框架和普通的 php 站点中，都将no-js类添加到<HTML>标签中。

为什么要这样做？是否有某种默认浏览器行为对此类做出react？为什么总是包含它？如果没有 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>元素将始终具有此类。有人可以解释为什么经常这样做吗？

6个回答

当 Modernizr 运行时，它会删除“no-js”类并将其替换为“js”。这是一种根据是否启用 Javascript 支持来应用不同 CSS 规则的方法。

请参阅Modernizer 的源代码。

由于 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. */ }。希望这可以帮助。-缺口
2021-04-18 03:29:35
@ZachL 我意识到我必须在这里抽烟，但在我看来.js { padding: ...}这很好，因为你知道实现它的人是 body = .js。更直接地说明您的观点，您似乎声称这body.js比.js body我没有遵循的更糟糕......
2021-04-30 03:29:35
值得一提的是 html5-boilerplate 把它放在了上面，<html>而且从来没有报告过任何问题。不知何故，穿上它<html>已经成为一种既定的做法，人们立即知道它是什么以及它的作用。最后，偏离这种做法只会引发更多问题。
2021-05-03 03:29:35
这里还有一篇很棒的文章：alistapart.com/articles/...
2021-05-11 03:29:35
@Ringo：HTML 5 规定任何元素都可以有一个class属性。尽管 HTML 4 技术上没有，但没有浏览器会阻塞它；即使是那些不支持它的人也会忽略它，而且我已经很多年没有见过这些浏览器之一了。
2021-05-13 03:29:35

该no-js班是由使用的Modernizr功能检测库。当 Modernizr 加载时，它会替换no-js为js. 如果 JavaScript 被禁用，该类将保留。这允许您编写可轻松针对任一条件的 CSS。

来自Modernizrs 的 Anotated Source （不再维护）：

从元素中删除“no-js”类（如果存在）： docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

这是 Paul Irish 的一篇博客文章，描述了这种方法：http : //www.paulirish.com/2009/avoiding-the-fouc-v3/

我喜欢做同样的事情，但没有 Modernizr。我把下面<script>的<head>给类更改为js是否启用JavaScript。我更喜欢使用.replace("no-js","js")正则表达式版本，因为它不那么神秘并且适合我的需要。

<script>
    document.documentElement.className = 
       document.documentElement.className.replace("no-js","js");
</script>

在此技术之前，我通常只会直接使用 JavaScript 应用依赖于 js 的样式。例如：

$('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'});

有了这个no-js技巧，现在可以通过以下方式完成css：

.js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green }

这是可取的，因为：

  • 它加载速度更快，没有 FOUC（无样式内容的flash）
  • 关注点分离等...
@ZachL 正则表达式版本（带有\b）与类似的内容不匹配anno-jsus，另一个将其更改为anjsus. no-js不是任何类名的典型子字符串，但在这方面它仍然是“更安全”的\bs。
2021-04-18 03:29:35
@AndrewF - 你能不能稍微扩展一下？它究竟有多安全？
2021-05-03 03:29:35
不过，使用 RegExp 的 Modernizr 版本更安全（并且可能更快）。
2021-05-08 03:29:35

Modernizr.js 将删除no-js该类。

这允许您制定 CSS 规则，.no-js something以便仅在禁用 Javascript 时应用它们。

该no-js班获得由JavaScript的脚本文件删除，这样你就可以修改/显示/隐藏的东西使用CSS，如果JS被禁用。

请注意，在 Modernizr 执行此操作后可能会发生 JS 错误，因此它不是测试 JS 功能的万无一失的方法
2021-04-25 03:29:35
您说“无 js 类被 javascript 脚本删除”。那么 Javascript 是如何工作的（能够删除 'no-js' 类），如果它被禁用。可以给我说清楚吗？
2021-04-30 03:29:35
你是对的，这实际上是重点：如果 JavaScript 被禁用，该类将保留，例如，您可以使用 CSS 显示一些 html 部分来警告用户。 .no-js #js-warning {display: block;}
2021-05-05 03:29:35

这不仅适用于 Modernizer。我看到一些像下面这样的网站工具来检查它是否有 javascript 支持。

<body class="no-js">
    <script>document.body.classList.remove('no-js');</script>
    ...
</body>

如果有 javascript 支持，那么它将删除no-js类。否则no-js会留在body标签中。然后他们在没有 javascript 支持时控制 css 中的样式。

.no-js .some-class-name {

}
其它你可能感兴趣的问题
上一篇Backbone.js：重新填充或重新创建视图？ 下一篇如何为小图标保存另一个宝贵的 HTTP 请求？