- 一个shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现
- 一个polyfill就是一个用在浏览器API上的shim.我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill.然后新旧浏览器就都可以使用这个API了
Modernizr 会在页面加载后立即检测H5和Css3的浏览器兼容性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
- 注意Modernizr.js是按顺序执行而非在window.onload之后
- 使用css检测对应特性
- 可用/不可用的html元素会获得一个 no-name/name的class;例如.no-borderradius以及.fontface
/* In your CSS: */
.no-audio #music {
display: none; /* Don't show Audio options */
}
.audio #music button {
/* Style the Play and Pause buttons nicely */
}
<!-- In your HTML: -->
<div id="music">
<audio>
<source src="audio.mp3" />
</audio>
<button id="play">Play</button>
</div>
- 使用js检测对应特性
if (Modernizr.audio) {
/* properties for browsers that
support audio */
alert(1)
}else{
/* properties for browsers that
does not support audio */
alert(2)
}
- Modernizr.load用于根据不同兼容性,加载不同js和css
Modernizr.load({
test: Modernizr.canvas,
yep: 'html5CanvasAvailable.js’,
nope:['presentational-polyfill.js', 'presentational.css'],
both: 'myCustomScript.js' ,
complete : function () {
// Run this after everything in this group has downloaded and executed
}
});
