最近有些朋友问到：为什么我的网页 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. LNMP环境magento常见错误

    一.安装报404错误 git clone 下最新代码,跳转到index/install 安装时出现404错误 需要把伪静态规则加到nginx配置文件中: # # The default server ...

  2. WinRAR的命令行模式用法介绍

    因工作中要对数据打包,顺便研究了下WinRAR的命令行模式,自己写了些例子,基本用法如下: 测试压缩文件准备:文件夹test_data,内部包含子文件夹,分别存放了一些*.log和*.txt文件. 测 ...

  3. 使用IntelliJ IDEA搭建多maven模块JAVA项目

    一.新建项目和模块 步骤: 1. 新建一个项目,因为maven管理jar包非常方便,故此处建立一个maven项目:New Project->Maven->(Create from arch ...

  4. 关于selenium的CI、框架……

    这段时间除了项目测试外,主要在做web自动化的事情,大致总结一下吧,总体的设计模式pageobject+pagefactory+testng的数据驱动,项目用maven来构建,使用jenkins集成, ...

  5. 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  6. jquery的css详解（一）

    通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...

  7. 导出本地和远程SVN项目, Export remote SVN repository

    在有服务器控制权的情况下, 源服务器上 sudo svnadmin dump ironbank/ > ~/ironbank.svn.dump 在目的服务器上 sudo svnadmin crea ...

  8. PAT 1032. 挖掘机技术哪家强(20)

    为了用事实说明挖掘机技术到底哪家强,PAT组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第1行给出不超过105的正整数N,即参赛人数.随后N行,每行给出一位 ...

  9. Winform程序Chrome内核 WebBrowser 控件

    准备工作 Chrome浏览器的内核不叫Chrome,而是Webkit,因此,我们只要找到Webkit的项目就好了. 1.下载WebKit的项目bin,网址如下: https://sourceforge ...

  10. MVC5 + EF6 + Bootstrap3 (16) 客户端验证

    Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-client-side-validation.html 系列 ...