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


当前回答

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>中,如果启用JavaScript,将类更改为js。我更喜欢使用.replace("no-js","js")而不是regex版本,因为它不那么神秘,适合我的需求。

<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) 分离关注点,等等……

其他回答

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

Modernizr.js将删除no-js类。

这允许你为.no-js创建一些CSS规则,只在Javascript被禁用时才应用它们。

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>中,如果启用JavaScript,将类更改为js。我更喜欢使用.replace("no-js","js")而不是regex版本,因为它不那么神秘,适合我的需求。

<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) 分离关注点,等等……

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

}

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

参见Modernizer的源代码。