我注意到在许多模板引擎中,在 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>
元素将始终具有此类。有人可以解释为什么经常这样做吗?
Modernizr 运行时,它会删除“no-js”类并将其替换为“js”。这是一种根据是否启用 Javascript 支持来应用不同 CSS 规则的方法。
Modernizr 特征检测库使用 no-js
类。当 Modernizr 加载时,它会将 no-js
替换为 js
。如果 JavaScript 被禁用,该类仍然存在。这使您可以编写轻松针对任一条件的 CSS。
从 Modernizrs' Anotated Source (no longer maintained):
从元素中删除“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
。我更喜欢使用 .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(无样式内容的闪存)
关注点分离等...
\b
)与 anno-jsus
之类的内容不匹配,另一个将其更改为 anjsus
。 no-js
不是任何类名的典型子字符串,但在这方面它仍然使用 \b
更“安全”。
Modernizr.js 将删除 no-js
类。
这允许您为 .no-js something
制定 CSS 规则,以便仅在禁用 Javascript 时应用它们。
no-js
类被 javascript 脚本删除,因此如果 js 被禁用,您可以使用 css 修改/显示/隐藏内容。
.no-js #js-warning {display: block;}
这不仅适用于 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 {
}
查看 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 不在浏览器中运行,那么使用它的样式会有所不同。
no-js 类用于设置网页样式,取决于用户是否在浏览器中禁用或启用了 JS。
根据 Modernizr docs:
no-js 默认情况下,Modernizr 会将 重写为 。这可以隐藏某些只应在执行 JavaScript 的环境中公开的元素。如果要禁用此更改,可以在配置中将 enableJSClass 设置为 false。
.myclass { /* CSS code for all versions of your page goes here */ }
、.js .myclass { /* This CSS code will only show up if JS is enabled */ }
和.no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }
。希望这可以帮助。 -缺口class
属性。尽管 HTML 4 在技术上没有,但没有浏览器阻塞它;即使是那些不支持它的也只是忽略它,而且我已经好几年没见过这些浏览器了。.js { padding: ...}
很好,因为您知道作为实现它的那个人 body = .js。更直接地表明您的观点,您似乎声称body.js
比我没有关注的.js body
更糟糕......<html>
上,并且从未报告过任何问题。不知何故,将它放在<html>
上已成为一种既定做法,人们立即知道它是什么以及它做了什么。最后,偏离这种做法只会引发更多问题。