modernizr.js
为HTML5
和CSS3
而生!
modernizr.js
会检测当前浏览器是否支持CSS3
的特性, 比如@font-face
、border-radius
、border-image
、box-shadow
、rgba()
等, 同时也会检测是否支持HTML5
的特性,比如audio
、video
、local storage
、新的input
标签的类型和属性等。 在获取到这些信息的基础上,你可以在那些支持这些功能的浏览器上使用它们。
modernizr.js
帮助我们检测浏览器是否实现了某个功能,如果实现了那么开发人员就可以充分利用这个功能做一些工作, 反之没有实现开发人员也好提供一个fallback。所以,我们要明白的是modernizr.js
只是帮我们检测功能是否被支持, 它并不能够给浏览器添加那些本来不支持的功能。
modernizr.js
内置了html5shiv,所以,HTML5
新增的标签可以放心的使用。
modernizr.js
官网:https://modernizr.com
modernizr.js
在GitHub上的网址:https://github.com/Modernizr/Modernizr
BootCDN⤵︎
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<![endif]-->
step1、通过包管理器
安装modernizr.js
包管理器 | 安装命令 |
---|---|
bower | bower install modernizr --save |
npm | npm install modernizr --save |
yarn | yarn add modernizr |
step2、在HTML代码中引入JavaScript
<!--[if lt IE 9]>
<script type="text/javascript" src="/bower_components/modernizr/dist/modernizr.min.js"></script>
<![endif]-->
考虑到IE9
是支持HTML5
和CSS3
的,所以,我们判断浏览器是低于IE9
才加载。
modernizr.js
内置了html5shiv, 所以我们必须在body
元素之前引用这个类库。当然你如果针对的是IE9+
的浏览器,那么大可以在页面元素加载完后再引入, 但这样就会有FOUC
这样极不友好的效果出现。
在html
标签中加入no-js
类,以免浏览器禁用了JavaScript
。
页面渲染完成后,使用"Inspect Element
"查看结果,你可能会发现, 在html
标签中有一些以no-
为前缀的class
, 当然大部分都没有这个前缀。如果一个类名以no-
作为前缀,比如no-touch
, 这表示浏览器不支持touch
特性。
我们可以根据这些以no-
为前缀class
进行hack。
示例:
.no-touch div {
/*-- do some hacks here --*/
}
你要检测某个特性,使用Modernizr.feature
,feature
就是某个具体的特性。
示例:
if (Modernizr.webgl) {
/* support WebGL */
} else {
/* not support WebGL */
}
此方法基于YepNope.js实现。
示例:
Modernizr.load(
test: Modernizr.webgl,
yep : 'three.js',
nope: 'jebgl.js'
);
当浏览器支持WebGL
的时候,就引入three.js这个类库做一些3D效果。 浏览器不支持WebGL
的时候可以使用jebgl.js
做一些fallback操作。
根据一些条件判断来动态选择加载CSS
和JavaScript
,这无疑对避免不必要的资源加载有极大的帮助。
你可以在HTML5 Cross Browser Polyfills找到几乎所有新特性的fallback解决方案。