什么是HTML的目的“没有

我注意到在很多模板引擎中,在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规则的一种方式。

参见Modernizer的源代码。


Modernizr特征检测库使用no-js类。 当Modernizr加载时,它用no-js代替no-js js 。 如果JavaScript被禁用,则该类仍然存在。 这使您可以轻松地编写任何条件的CSS。

来自Modernizrs'Anotated Source(不再保留):

从元素中删除“no-js”类,如果它存在: docElement.className=docElement.className.replace(/bno-jsb/,'') + ' 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(未格式化内容的闪光)
  • 分离顾虑等...

  • Modernizr.js将删除no-js类。

    这允许您为.no-js something制定CSS规则,以便仅在JavaScript禁用时才应用它们。

    链接地址: http://www.djcxy.com/p/2865.html

    上一篇: What is the purpose of the HTML "no

    下一篇: What is the native keyword in Java for?