HTML“no-js”的目的是什么？班级？

发布于 2024-11-24 06:16:07 字数 831 浏览 1 评论 0原文

我注意到在很多模板引擎中，在 HTML5 Boilerplate 中，在各种框架和普通 php 网站中，都有no-js 类添加到标记上。

为什么要这样做？是否有某种默认浏览器行为对此类做出反应？为什么总是包含它？如果没有 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]-->

如您所见，元素将始终具有此类。有人能解释一下为什么经常这样做吗？

原文

I notice that in a lot of template engines, in the HTML5 Boilerplate, in various frameworks and in plain php sites there is the no-js class added onto the <HTML> tag.

Why is this done? Is there some sort of default browser behavior that reacts to this class? Why include it always? Does that not render the class itself obsolete, if there is no no-"no-js" case and html can be addressed directly?

Here is an example from the 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]-->

As you can see, the <html> element will always have this class.
Can someone explain why this is done so often?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜访吸血鬼 2024-12-01 06:16:15

查看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 不在浏览器中运行，则其使用方式会有所不同。

Look at the source code in Modernizer, this section:

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

So basically it search for classPrefix + no-js class and replace it with classPrefix + js.

And the use of that, is styling differently if JavaScript not running in the browser.

回复收藏 0 原文

暮年 2024-12-01 06:16:15

no-js 类用于设置网页样式，具体取决于用户在浏览器中是否禁用或启用了 JS。

根据 Modernizr 文档：

无js
默认情况下，Modernizr 会重写 ;到。这可以隐藏某些只应该出现的元素
暴露在执行 JavaScript 的环境中。如果你想
禁用此更改，您可以在您的
配置。

回复收藏 0 原文

明月松间行 2024-12-01 06:16:14

no-js 类被 javascript 脚本删除，因此如果禁用 js，您可以使用 css 修改/显示/隐藏内容。

回复收藏 0 原文

寄居者 2024-12-01 06:16:14

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

}

This is not only applicable in Modernizer. I see some site implement like below to check whether it has javascript support or not.

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

If javascript support is there, then it will remove no-js class. Otherwise no-js will remain in the body tag. Then they control the styles in the css when no javascript support.

.no-js .some-class-name {

}

回复收藏 0 原文

极度宠爱 2024-12-01 06:16:13

Modernizr.js 将删除 no-js 类。

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

回复收藏 0 原文

羁绊已千年 2024-12-01 06:16:12

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。
如果启用了 JavaScript，我将以下

<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（无样式内容的闪存）
分离的顾虑等等

The no-js class is used by the Modernizr feature detection library. When Modernizr loads, it replaces no-js with js. If JavaScript is disabled, the class remains. This allows you to write CSS which easily targets either condition.

From Modernizrs' Anotated Source (no longer maintained):

Remove "no-js" class from element, if it exists:
docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

Here is a blog post by Paul Irish describing this approach:
http://www.paulirish.com/2009/avoiding-the-fouc-v3/

I like to do this same thing, but without Modernizr.
I put the following <script> in the <head> to change the class to js if JavaScript is enabled. I prefer to use .replace("no-js","js") over the regex version because its a bit less cryptic and suits my needs.

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

Prior to this technique, I would generally just apply js-dependant styles directly with JavaScript. For example:

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

With the no-js trick, this can Now be done with css:

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

This is preferable because:

It loads faster with no FOUC (flash of unstyled content)
Separation of concerns, etc...

回复收藏 0 原文

￠好甜 2024-12-01 06:16:11

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

请参阅 Modernizer 源代码。

回复收藏 0 原文

~没有更多了~

关于作者

画离情绘悲伤

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

HTML“no-js”的目的是什么？班级？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

HTML“no-js”的目的是什么？班级？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。