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

510

我注意到，在许多模板引擎中，在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>元素将始终具有此类。有人可以解释为什么如此频繁吗？

— 斯瓦德
source

493

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

请参阅Modernizer的源代码。

— 格雷戈里·帕科斯（Gregory Pakosz）
source

5

：这里有关于它的另一个伟大的写了alistapart.com/articles/...

— Hannele

47

由于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. */ }。希望这可以帮助。-Nick

— skcin7'8

33

@Ringo：HTML 5指定任何元素都可以具有class属性。尽管从技术上讲HTML 4并不是这样，但没有浏览器在它上面阻塞。即使是不支持它的浏览器也只会忽略它，而且多年来我也没有见过这些浏览器之一。

— cHao 2012年

4

@ZachL我意识到我必须在这里抽烟，但是在我看来，这.js { padding: ...}很好，因为您知道实施body = .js的那个人。更直接的要贵点，看来你是声称，body.js更糟糕的是比.js body这我不以下...

— wired_in

4

值得一提的是html5-boilerplate戴上了它，<html>对此还没有任何问题的报道。以某种方式戴上它<html>已经成为一种惯例，人们立即知道它是什么以及它做什么。最后，背离这种做法只会引发更多问题。

— Gregory Pakosz 2014年

109

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

来自Modernizrs的注释源 （不再维护）：

从元素中删除“ 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依赖的样式直接应用于JavaScript。例如：

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

有了这个no-js技巧，现在可以使用css：

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

这是优选的，因为：

没有FOUC（未样式化内容的闪烁），加载速度更快
关注点分离等

— 扎克·莱索比（Zach Lysobey）
source

1

不过，使用RegExp的Modernizr版本更安全（并且可能更快）。

— AndrewF

@AndrewF-您可以在此扩展一下吗？到底有多安全？

— Zach Lysobey 2013年

12

@ZachL regexp版本（带有\b）与之类的不匹配anno-jsus，其他版本将其更改为anjsus。no-js不是任何类名的典型子字符串，但就此而言，使用\bs 更“安全” 。

— Cucu 2013年

40

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

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

— ak
source

17

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

— 渣
source

您说“ no-js类已被JavaScript脚本删除”。因此，如果禁用了Javascript，它的工作方式（可以删除“ no-js”类）。你能给我讲清楚吗？

— haind 2013年

2

您说对了，这实际上是要点：如果禁用了JavaScript，则该类将保留，例如，您可以使用CSS显示一些html部分，以向用户发出警告。.no-js #js-warning {display: block;}

— 2014年

请注意，Modernizr完成此操作后可能会发生JS错误，因此它并不是测试JS的可靠方法

— htmlr 2014年

11

这不仅适用于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 {

}

— 费泽汗
source

4

在此部分中查看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-jsclass并将其替换为classPrefix + js。

如果浏览器中未运行JavaScript，则使用的样式会有所不同。

— 阿里雷扎
source

1

no-js类用于设置网页样式，具体取决于用户是否在浏览器中启用或禁用了JS。

根据Modernizr docs：

无js

默认情况下，Modernizr将重写<html class="no-js"> to <html class="js">。这样可以隐藏某些仅应在执行JavaScript的环境中公开的元素。如果要禁用此更改，可以在配置中将enableJSClass设置为false。

— JSON C11
source