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

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

为什么这样做? 是否有某种types的默认浏览器行为对这个类作出反应? 为什么总是包括它? 如果没有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>元素将始终有这个类。 有人可以解释为什么经常这样做吗?

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

参见Modernizer的源代码 。

Modernizr特征检测库使用no-js类。 当Modernizr加载时,它用no-js代替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。 如果启用了JavaScript,我将下面的<script>放在<head>以将类更改为js 。 我更喜欢在正则expression式中使用.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(未格式化内容的闪光)
  • 分离关心等…

Modernizr.js将删除no-js类。

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

no-js类被JavaScript脚本删除,所以如果js被禁用,你可以使用css修改/显示/隐藏东西。

这不仅适用于Modernizer。 我看到像下面的一些网站实施,以检查它是否有JavaScript的支持与否。

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

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

 .no-js .some-class-name { } 

查看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'); } 

所以基本上它searchclassPrefix + no-js类并将其replace为classPrefix + js

而且,如果JavaScript没有在浏览器中运行,那么使用它的风格会有所不同。