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

Question

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

Swa*_*der 501 html javascript modernizr html5boilerplate

我注意到在很多模板引擎中,在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]-->

Run Code Online (Sandbox Code Playgroud)

如您所见,<html>元素将始终具有此类.有人可以解释为什么经常这样做吗？

Answer 1

Gre*_*osz 484

当Modernizr运行时,它会删除"no-js"类并用"js"替换它.这是一种应用不同CSS规则的方法,具体取决于是否启用了Javascript支持.

请参阅Modernizer的源代码.

由于Modernizr将"no-js"替换为"js",因此您可以将其用作在CSS代码中执行if/else语句的方法.例如,`.myclass {/*你的页面的所有版本的CSS代码都在这里*/}`,`.js .myclass {/*这个CSS代码只会在JS启用时出现*/}`和`. no-js .myclass {/*这个CSS代码只会在JS被禁用时显示.*/}`.希望这可以帮助.-缺口 (45认同)
@Ringo:HTML 5指定*any*元素可能具有`class`属性.虽然HTML 4在技术上没有,但没有浏览器扼杀它; 即使那些不支持它的人也会忽略它,而且我多年没见过这些浏览器了. (33认同)
这里有另一篇很棒的文章:http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/ (5认同)
@ZachL我意识到我必须在这里吸烟,但在我看来,`.js {padding:...}`就好了,因为你知道实现它的那个body = .js.更直接的是,你似乎声称`body.js`比`.js body`更糟糕,我不遵循... (4认同)
值得一提的是html5-boilerplate将它放在`<html>`上并且没有任何问题报道过.以某种方式把它放在"<html>"上已经成为惯例,人们立即知道它是什么以及它做了什么.最后,偏离这种做法只会引发更多问题. (4认同)
这有点烦人,因为html标签不应该分配任何类名. (2认同)

Answer 2

Zac*_*bey 107

该no-js班是由使用的Modernizr功能检测库.当Modernizr加载时,它将替换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.我把下面<script>的<head>给类更改为js是否启用JavaScript.我更喜欢使用.replace("no-js","js")正则表达式版本,因为它有点不那么神秘,适合我的需要.

<script>
    document.documentElement.className = 
       document.documentElement.className.replace("no-js","js");
</script>

Run Code Online (Sandbox Code Playgroud)

在此技术之前,我通常只使用JavaScript直接应用js依赖样式.例如:

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

Run Code Online (Sandbox Code Playgroud)

有了这个no-js技巧,现在可以通过以下方式完成css:

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

Run Code Online (Sandbox Code Playgroud)

这是更可取的,因为:

它没有FOUC(没有样式内容的闪存)加载速度更快
关注点分离......

@ZachL正则表达式版本(带有`\ b`)与`anno-jsus`不匹配,另一个将其更改为`anjsus`.`no-js`不是任何类名的典型子串,但在这方面它仍然是'\ b'更"安全". (12认同)

Answer 3

SLa*_*aks 40

Modernizr.js将删除该no-js课程.

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

Answer 4

mar*_*arc 17

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

你是对的,这实际上就是重点:如果JavaScript被禁用,那么该类将保留,你可以使用CSS来显示一些html部分来警告用户.`.no-js #js-warning {display:block;}` (2认同)

Answer 5

Fiz*_*han 11

这不仅适用于Modernizer.我看到一些网站实现如下,以检查它是否有JavaScript支持.

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

Run Code Online (Sandbox Code Playgroud)

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

.no-js .some-class-name {

}

Run Code Online (Sandbox Code Playgroud)

Answer 6

Ali*_*eza 5

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

Run Code Online (Sandbox Code Playgroud)

所以基本上它搜索 classPrefix + no-jsclass 并将其替换为 classPrefix + js。

如果 JavaScript 不在浏览器中运行，那么使用它的样式会有所不同。

归档时间：	14 年，7 月前
查看次数：	222127 次
最近记录：	7 年，3 月前