传统浏览器目前不会被完全取代，但令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生，作为一个开源的 JavaScript 库，Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。 Modernizr 并非试添加老版本浏览器不支持的功能，而是令你通过创建可选风格配置修改页面设计。 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。

一.使用Modernizr前提条件:
1.添加引用:

二.使用Modernizr检测浏览器是否支持CSS3:
添加div代码:

[html] view plaincopy

1. 

css样式:

[css] view plaincopy

1. .boxshadow #MyContainer { border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px;}   

[css] view plaincopy

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

如果浏览器不支持box-shadow属性则调用下面的样式

三.使用Modernizr 验证 HTML5 必需的表单字段
添加div代码:
search: 

JS代码:

[javascript] view plaincopy

1. window.onload = function() {   

2.   // 获取表单input标签元素　　  

3.   var form = document.forms[0], inputs = form.elements; 　　  

4.   if (!Modernizr.input.autofocus) {   

5.      //因如果不支持 autofocus，那么该条件的求值结果为 true，并且 inputs[0].focus() 将光标放在第一个输入字段 　　　　   

6.      inputs[0].focus();   

7.    }　   

8.    if (!Modernizr.input.required) {   

9. 　　　form.onsubmit = function() {   

10. 　　　var required = [], att, val;  

11. 　　  // loop through input elements looking for required  　　　　　　　　  

12.       for (var i = 0; i < inputs.length; i++) {  

13. 　　　　att = inputs[i].getAttribute(required); 　　　　　　　　　　  

14.         // if required, get the value and trim whitespace  　　　　　　　　　　　　  

15.         if (att != null) {   

16. 　　　　　val = inputs[i].value;   

17.           // if the value is empty, add to required array  　　　　　　　　　　　　　　　　  

18.           if (val.replace(/^s+|s+$/g, ) == ) {   

19. 　　　　　　　required.push(inputs[i].name);  

20. 　　　　  }   

21. 　　  　}  

22. 　    }   

23.       // show alert if required array contains any elements  　　　　  

24.        if (required.length > 0) {   

25. 　　　  alert(以下字段是必须的:  + required.join(, ));   

26. 　　　　// prevent the form from being submitted  　　　　　　  

27.         return false;   

28. 　    }   

29.      };  

30. 　}   

31. }