Modernizr技术入门

引入官方的说法：Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案；
再看工作原理：Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
网址：http://modernizr.cn/
刚开始建议使用开发版本。也有新手上路（英文介绍）
比如我要想让canvas进行兼容。先到 http://caniuse.com/，输入canvas查看一下兼容性。Canvas (basic support)版本兼容性如下：
Method of generating fast, dynamic graphics using JavaScript.

然后选择需要兼容的项目，在HTML5下选择canvas，点击生成代码后进行DOWNLOAD下载，最好把不压缩代码勾选上

在我们的html中引入js文件，原理上说是在页面加载后就立即执行js文件，所以需要把它引在开头，同时也要引入juery文件，同时在html5开头也要写入class=”no-js”，这样可以使其他js代码顺利执行。
1 JavaScript代码中的使用












$(document).ready(function () {
if (Modernizr.canvas) {
//如果浏览器支持canvas，那么我们绘制一个canvas图像
var can = document.getElementById(‘can’);
var ctx = can.getContext(‘2d’);
ctx.beginPath();
ctx.moveTo(5,5);
ctx.lineTo(5,50);
ctx.lineTo(30,25);
ctx.lineTo(5,5);
ctx.closePath();
ctx.fillStyle = “blue”;
ctx.fill();
}else{
//如果浏览器不支持canvas，那么加载一个图像
can = document.getElementById(‘can’);
var img = document.createElement(‘img’);
img.setAttribute(‘href’,’./img/smallAA.jgp’);
can.appendChild(img);var can = document.getElementById(‘can’);
can.setAttribute(‘href’) }
});
浏览器中自动为html添加了class









2 css代码中的使用
Css代码中如何使用，比如我们添加了一个box’shadow兼容的js插件，可以这样写。
//如果浏览器支持boxshadow，那么就给它一个box-shadow，无边界
//（box-shadow: h-shadow v-shadow blur spread color inset;）

.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}
//如果浏览器不支持boxshadow，那么给一个border

.no-boxshadow #MyContainer {
border: 2px solid black;
}

> it was awaresome**重点内容**