内容简介：最近有些朋友问到：为什么我的网页 code 有其实，这个Modernizr 是一个 javascript 库，检查你的游览器是否支持 CSS3 或者 HTML5 的特性而自动添加一些类名（class）到 <html> 并 替换掉原来的 .no-js（简单来说，Modernizr 就是一个CSS3/HTML5 的测试器，你需要测试什么，这可以到它的官方网站配置，选择自己需要测试的元素）。
最近有些朋友问到：为什么我的网页 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/
IE8 例子
<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的）：
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<![endif]-->
以上所述就是小编给大家介绍的《关于 html class=”no-js”的使用》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- RecyclerView使用指南（一）—— 基本使用
- 如何使用Meteorjs使用URL参数
- 使用 defer 还是不使用 defer?
- 使用 Typescript 加强 Vuex 使用体验
- [译] 何时使用 Rust？何时使用 Go？
- UDP协议的正确使用场合（谨慎使用）
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Masterminds of Programming
Federico Biancuzzi、Chromatic / O'Reilly Media / 2009-03-27 / USD 39.99
Description Masterminds of Programming features exclusive interviews with the creators of several historic and highly influential programming languages. Think along with Adin D. Falkoff (APL), Jame......一起来看看 《Masterminds of Programming》 这本书的介绍吧!
