关于使用 no-js (Modernizr)

时间：2022-09-07 17:41:51

最近有些朋友问到：为什么我的网页 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&period;js Modernizr&period;js笔记

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

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

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

  3. Turn&period;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&period;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&lowbar;bootstrap less 移动端

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

随机推荐

  1. WordPress菜单函数wp&lowbar;nav&lowbar;menu&lpar;&rpar;详细介绍

    导航菜单函数wp_nav_menu()进行详细的说明. 1.wp_nav_menu()函数介绍: worpdress发展到3.0以后增加了一个自定义菜单函数wp_nav_menu(),使得wordpr ...

  2. asp xmlhttp 读取文件

    Response.Write LoadTxtFile("URL") Function LoadTxtFile(LoadFile) Dim XMLHTTP, XMLDOC, Resp ...

  3. 新版Windows Azure CDN管理门户正式上线

    经过产品团队的不懈努力,新版Windows Azure CDN管理门户在经过了有限开放预览之后,已经正式上线并开放给所有用户. 新版Windows Azure CDN管理门户经过全新的设计,除了在使用 ...

  4. -linux删除大量文件----rm&comma;rsync

    要在linux下删除海量文件,比如有数十万个文件,此时常用的rm -rf * 就会等待时间很长.这时我们可以使用rsync快速删除大量文件. 1.建立一个空目录 mkdir -p /tmp/rsync ...

  5. voa 2015 &sol; 4 &sol; 13

    couch potato : someone who likes to spend a lot of time sitting or lying down while watching televis ...

  6. Unity3D编辑器扩展（三）——使用GUI绘制窗口

    前两篇分别讲解了创建菜单https://www.cnblogs.com/xiaoyulong/p/10115053.html和创建窗口https://www.cnblogs.com/xiaoyulon ...

  7. STM32F4 MDK5软件仿真 error &colon; no &&num;39&semi;read&&num;39&semi; permission

    问题描述 CPU:STM32F407 MDK5软件模拟提示没有读写权限,只能一步一步运行.提示代码如下: *** error 65: access violation at 0x40023800 : ...

  8. Linguistic Data Consortium &lpar;LDC&rpar;

    搞NLP的人经常会听到一个神秘的名字LDC,因为大量的论文所使用的数据都来自于LDC,本文就来揭露其神秘面目. About LDC: LDC,全名Linguistic Data Consortium, ...

  9. HDU - 3874 Necklace &lpar;树状数组、离线处理&rpar;

    题目链接:Necklace 题意: 给出一串珠子,每个珠子有它的value,现在给出n(n<=5e4)个珠子的value(1<=value<=1e6),现在给出m(1<=m&l ...

  10. python AES 加密

    pad: ZeroPadding mode: cbc #!/usr/bin/env python# -*- coding:utf-8 -*-# 这里使用pycrypto‎库# 按照方法:easy_in ...

相关文章