最近有些朋友问到：为什么我的网页 code 有 class="no-js" ？

<!DOCTYPE html>

<html dir="ltr" lang="en-US" class="no-js">

<head>

<meta charset="utf-8">
 

其实，这个 no-js 是配合 Modernizr 一起使用的类名（class）

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Modernizr 是一个 javascript 库，检查你的游览器是否支持 CSS3 或者 HTML5 的特性而自动添加一些类名（class）到 <html> 并 替换掉原来的 .no-js（简单来说，Modernizr 就是一个CSS3/HTML5 的测试器，你需要测试什么，这可以到它的官方网站配置，选择自己需要测试的元素）。

还有让你的游览器支持 HTML5 中的新的标签，例如：<nav>, <header>, <footer> 和 <figure>

Modernizr 官方网站：http://modernizr.com/

IE 8例子:

<html class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths" lang="zh">

可以看到，IE8 不支持很多 CSS3。以no开头的，都是不支持。

如何使用：

0、在 </head> 关闭前加载 Modernizr。（这是个独立的 js 库，跟 jQuery 没关系，没有 jQuery 也可以使用。）

<script src="/js/modernizr-2.5.3.min.js"></script>

</head>

1、如果你的游览器没启用 javascript，当然 html 中的 class=”no-js” 是没改变的，我们可以用这个 class 来提示用户启用 javascript。

<!DOCTYPE html>

<html dir="ltr" lang="en-US" class="no-js"><!-- html 需要添加 no-js 这个class -->

2、除了侦查游览器是否用了 javascript，还可以玩其他的东西，类似 IE hack。譬如 IE8 不支持 box-shadow，我们可以指定这个 div 使用背景图片让它看起来有暗影。

/* 是否支持 JavaScript */

/* 默认支持JS，所以就隐藏这个提示 */

.please-enable-js {

    display:none;

}

/* 不支持 JS 就显示用户需要启用JS */

html.no-js .please-enable-js {

    display:block;

}

/* 是否支持 css 渐变*/

.glossy {

    /* 默认设计使用css渐变 */

    background-image: linear-gradient(top, #555, #333);

}

.no-cssgradients .glossy {

    /* 不支持css渐变的就是用图片，这样不会损坏原本的设计 */

    background-image: url("images/glossybutton.png");

}

使用 Modernizr 中的 javascript 方式侦查一些 HTML5 元素

if (Modernizr.canvas){

   // 如果游览器支持 HTML canvas，就运行这些代码

} else {

   // 不支持就运行这写代码

}

更多侦查在 Modernizr test：http://modernizr.github.com/Modernizr/test/index.html

Modernizr 是一款很好的工具，让设计者更好控制他的设计。如果你只用一点点或许没用完全用上它的功能，这样太浪费了，你还是使用 html5shiv 吧。

更新 #1
可以在游览器 console 里输入Modernizr，也可以看到测试的结果（结果是布尔值）。（当然你要加载这个 Modernizr 的 javascript 才能用）

更新 #2 – 关于 html5shiv 误解
1、html5shiv 只是个 javascript 库，只有一个功能，就是让 Internet Explorer 6-8 支持 HTML5 的标签，例如 article，section，aside，video 等等……
2、Modernizr 默认包含了这个库
3、使用 html5shiv，配合 conditional comment。你也不想支持的游览器加载多余的东西吧（IE9+ 是支持 HTML5的。【xee:我想说支持不完善！】）：

<!--[if lt IE 9]>

    <script src="assets/js/html5shiv.js"></script>

<![endif]-->

<参考：http://blog.justwd.net/2012/02/about-no-js/>

关于使用 no-js (Modernizr)的更多相关文章

  1. 前端初学者——初探Modernizr.js Modernizr.js笔记

    什么是Modernizr? Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库. 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 ...

  2. HTML5系列四（特征检测、Modernizr.js的相关介绍）

    Modernizr:一个HTML5特征检测库 Modernizr帮助我们检测浏览器是否实现了某个特征,如果实现了那么开发人员就可以充分利用这个特征做一些工作 Modernizr是自动运行的,无须调用诸 ...

  3. Turn.js 实现翻书效果的学习与总结

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...

  4. Sass结合Modernizr的使用方法

    Modernizr在初始化的时候会首先找寻class=“no-js”的元素: <!DOCTYPE html> <html class="no-js"> &l ...

  5. js library

    jquery.js prototype.js requirejs.js backbone.js modernizr.js knockout.js http://share.renren.com/sha ...

  6. Modernizr

    Modernizr 目录 概述 CSS的新增class JavaScript侦测 加载器 参考链接 概述 随着HTML5和CSS3加入越来越多的模块,检查各种浏览器是否支持这些模块,成了一大难题.Mo ...

  7. Require.js 详细了解

    一.Require.js 作用 1.1.是JS 文件加载器,实现js脚本的AMD异步加载. 保证不阻塞页面的渲染和其后的脚本的执行,并提供了在加载完成之后的执行相应回调函数的功能. 1.2.实现JS. ...

  8. HTML5中Modernizr类库的作用和使用

    Modernizr 是一个用来检测浏览器功能支持情况的JavaScript 库.通过这个库我们可以检测不同的浏览器对于HTML5特性的支持情况. 使用Modernizr类库和使用其他第三方类库的方法是 ...

  9. 使用Modernizr检测支持CSS3

    使用Modernizr检测支持CSS3 如果支持某个属性,会增加一个class,名字就是该属性: 不支持,名字是no-某属性 还提供了一个全局Modernizr对象,使用如下: <script ...

  10. 9_bootstrap less 移动端

    chrome,firefox提供了"Device Emulation"功能,可模拟常见的各种浏览设备 android ADT或ios Xcode附带的设备模拟器,或第三方在线测试工 ...

随机推荐

  1. 使用FileZilla等软件搭建ftp服务器

    FTP的全称是File Transfer Protocol(文件传输协议).顾名思义,就是专门用来传输文件的协议. FTP服务器,则是在互联网上提供存储空间的计算机,它们依照FTP协议提供服务.简单地 ...

  2. FineReport根据点击次数奇偶性排序之字符型

    上一篇文章我们提到了字段为数据型的数据列排序方法,采用的是根据点击次数奇偶性来排序,那如果是字段为字符型,又该如何实现呢? 这里提供的解决思路是通过超级链接来实现升序降序两张模板之间的相互调用,每点击 ...

  3. js数组中的常用方法总结

    栈方法(后进先出) ArrayObj.push()方法 ArrayObj.pop()方法 ArrayObj.push():就是向数组末尾添加新的元素,返回的是数组新的长度.ArrayObj.pop() ...

  4. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 主管可以看下属的数据

    主管可以看下属的数据,这个是经常用到的一个权限,不管是大公司,还是小公司都需要的功能. 通过以下2个方法,可以任意达到想要的效果了,设置简单灵活,还能递归运算下属,有时候简单好用就是硬道理. #reg ...

  5. 为普通Object添加类似AttachedProperty的属性

    为普通Object添加类似AttachedProperty的属性   周银辉 我们知道,在WPF中对应一个DependencyObject,我们很容易通过AttachedProperty来为类型附加一 ...

  6. Tech Websites

    1,3D Game Engine Programming 2, 3, 4, 5,

  7. RAID级别

    raid磁盘阵列,我们一般使用RAID 5,挂载单独硬盘测试读写速度,一般使用RAID0.

  8. 解决ppt中视频不能播放的问题

    小伙伴一直在纠结一个问题,有个ppt,在其他人的电脑上可以正常播放其中的视频,但是在某一个电脑上却总是不能播放,一直没找到原因,俺们今早捯饬了一下,貌似找到一丢丢原因和解决办法了. #1,疑似原因 为 ...

  9. 详解mysql int类型的长度值问题【转】

    mysql在建表的时候int类型后的长度代表什么? 是该列允许存储值的最大宽度吗? 为什么我设置成int(1), 也一样能存10,100,1000呢. 当时我虽然知道int(1),这个长度1并不代表允 ...

  10. 跟我从零基础学习Unity3D开发--资源打包篇（AssetBundle）

    好久没更新了,一直在加班敢项目进度.这里和关注我的博客的童鞋表示一下歉意!这里有我录的Unity3D从零开始的视频教程大家可以关注一下:http://www.imooc.com/view/555  视 ...