javascript - html“no-js” 类的目的是什么?

  显示原文与译文双语对照的内容

我注意到在很多模板引擎中,在 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> 元素总是有这个类。 有人能解释为什么这样做如此频繁?

时间:

no-js 类被特性检测库使用。 当加载时,它用 js 替换。 如果禁用了 JavaScript,类仍然存在。 这使得你可以编写一个简单的CSS 。

Modernizrs'anotated源( 不再维护) ):

在元素( 如果该元素 exists, 移除"no-js"class: docElement.className=docElement.className.replace(/bno-jsb/,'') + ' js';

以下是Paul爱尔兰描述这里方法的博客文章: http://www.paulirish.com/2009/avoiding-the-fouc-v3/


我喜欢做同样的事情,但没有。 我将以下 <script> 放在 <head> 中,以便在启用JavaScript时将该类更改为 js 。 我喜欢使用 .replace("no-js","js") 这家 正规表达式 版本,因为它有点 LESS 隐含的并且适合我的需要。


<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 ( Flash unstyled内容),它加载的更快
  • 关注点分离,等等 。

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

}

...