最近有些朋友问到：为什么我的网页 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. Ubuntu配置OpenLDAP

    sudo apt-get install slapd ldap-utils sudo dpkg-reconfigure slapd sudo apt-get purge slapd sudo apt- ...

  2. Windows Live Writer测试

    第一次使用Windows Live Writer,一堆问题,不知道是中国强大的局域网防火墙问题还是咋的,弄了半天. 1.C++的测试代码: int _tmain(int argc, _TCHAR* a ...

  3. spark dataframe unionall

    今天本来想写一个spark dataframe unionall的demo,由于粗心报下面错误: Exception in thread "main" org.apache.spa ...

  4. Socket

    Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求. 以J2SDK-1.3为例,Socket和ServerSocket类库位于 ...

  5. kettle启动“Error: could not create the Java Virtual Machine”

    因为我的操作系统是32bit,而Ketttle的Spoon脚本中,默认是PENTAHO_DI_JAVA_OPTIONS="-Xms1024m" "-Xmx2048m&qu ...

  6. [备份]破解Xamarin

    [转]试用了一阵子Mono For Android,今天到期了,,囊中羞涩,只好破解. 说是要在vs2013的英文界面下运行破解包,不知道是真是假,下载并安装了一个. 然后又下载了破解包.是个名为xa ...

  7. webService获取电话号归属地和获取天气情况步骤，及创建属于自己的webservice

    一.什么是Web服务 Web服务是一种可以用来解决跨网络应用集成问题的开发模式,目的是保证不同平台的应用服务可以互操作 二.Web服务的三个核心 Soap: SOAP(Simple Object Ac ...

  8. git教程链接

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

  9. Python-04-基础

    一.装饰器(decorator) 装饰器本质上也是函数,目的是为其他函数添加附加功能(装饰其他函数) Python通过使用装饰器来达到代码的开放与封闭. 原则: 不能修改被装饰函数的源代码. 不能修改 ...

  10. EO.Pdf 去水印版本，需要的自取

    链接:http://pan.baidu.com/s/1o8apLpC 密码:9axl