现在的网页设计与前端开发离不开各种前沿技术，在这个越来越重视用户体验的时代，用户对网页的要求也越来越高。Modernizr是一种非常强大的前端开发工具，能够及时帮助开发者检测各种HMTL/CSS/JS属性和特性在不同浏览器之间的兼容性，并且为开发者提供定制化建议和管理不同浏览器的方案和技巧。

一、Modernizr的原理

Modernizr是基于JavaScript的库，它使用了“特性检测”（feature detection）的概念，即通过检测浏览器是否支持具体的属性或标签来判断浏览器的能力，而不是使用“对象检测”（object detection）来判断浏览器的身份。这个过程不需要任何插件或其他程序的支持，只需要在页面上添加 Modernizr.js 并运行单元测试即可。

Modernizr实现了利用HTML5的data-*属性加载JavaScript来检测浏览器的能力，这样既保证了性能上的优势，又解决了安全性的问题。Modernizr还可以建立一个特性检测的报告，并根据报告给出优化的技巧和方案。

二、Modernizr的应用

1. Modernizr引入

Modernizr可以在页面上添加 JavaScript 编写的代码来使用。添加Modernizr的最简单的方法是使用CDN，如下：

```

```

2. Modernizr检测特性的方法

Modernizr使用的检测特性的方法十分简单，例如我们要检测浏览器是否支持 CSS3 的边框圆角属性我们可以这样做：

```

if (Modernizr.border-radius) {

// 支持边框圆角

} else {

// 不支持边框圆角

}

```

Modernizr 还支持低版本浏览器的检测：

```

if (Modernizr.cssgradients && Modernizr.csstransforms) {

// 支持CSS渐变与CSS2D变换

}

```

3. Modernizr的值

Modernizr 为每个属性和特性提供了三个值：true、false 和未定义。

如果浏览器支持该特性，值为 true；如果浏览器不支持该特性，值为 false；如果检测的特性不存在于 Modernizr 检测库中，值为 undefined。

4. Modernizr的定制化配置

Modernizr 使用数据属性定制配置来加强浏览器的检测。例如：

```

```

提示 Modernizr 库在开始前会将任何不存在的 Modernizr 对象定义并设置为全局。

5. Modernizr的深入应用

a. Modernizr检测某个属性是否支持，针对不同的情况给予相应的处理代码：

```

if(Modernizr.canvas) {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

// 对canvas执行其他操作

} else {

alert("您的浏览器不支持Canvas，请更新浏览器！");

}

```

b. Modernizr支持的类名，帮助你给不支持某些属性的浏览器打补丁，让网页更适配：

例如我们有一个不支持遮罩的div元素，我们可以把“no-shape-outside”的类名赋给它：

```

.no-shape-outside {

background: url(/images/no-shape-outside.jpg) #FFF;

color: #333;

padding: 15px;

}

```

c. Modernizr不支持通过样式表添加的键值对属性，在HTML的data-属性上手动添加对应的样式，然后在css中使用属性选择器引用这些数据属性：

HTML

```

该元素有3列。