HTML "no-js"类的目的是什么?



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

为什么要这样做?是否有某种默认的浏览器行为会对此类做出反应?为什么总是包含它?如果没有"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"类并用"js"替换它。这是一种根据是否启用Javascript支持来应用不同CSS规则的方法。

请参阅Modernizer的源代码。

Modernizr特征检测库使用no-js类。当Modernizr加载时,它用js替换no-js。如果禁用了JavaScript,则该类将保留。这使您可以编写CSS,轻松地针对任一条件。

来自Modernizrs的匿名来源(不再维护(:

从元素中删除"no-js"类(如果存在(:docElement.className=docElement.className.replace(/bno-jsb/,'') + ' js';

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


我喜欢做同样的事情,但没有Modernizr。我在<head>中放入以下<script>,以便在启用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(未格式化内容的闪烁(
  • 关注点分离等

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标签中。然后,当没有javascript支持时,它们控制css中的样式。

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

所以基本上它搜索classPrefix+no-js类,并用classPrefix+js替换它。

如果浏览器中没有运行JavaScript,那么它的使用方式也会有所不同。

无js类用于设计网页样式,这取决于用户在浏览器中是否禁用或启用了js。

根据Modernizr文档:

无js

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

最新更新