Introduction to HTML5 CSS3 using Modernizr_html/css_WEB-ITnose

Traditional browsers will not be completely replaced at this time, making it difficult for you to embed the latest CSS3 or HTML5 features into your website. Modernizr came into being to solve this problem. As an open source JavaScript library, Modernizr detects the browser's support for CSS3 or HTML5 functions. Rather than trying to add features that older browsers don't support, Modernizr lets you modify the page design by creating optional style configurations. It can also load customized scripts to simulate functions that older browsers do not support.

Modernizr download address: http://modernizr.com/download/

1. Prerequisites for using Modernizr:
1. Add reference:
2. Add the "no-js" class to the element

2. Use Modernizr to detect whether the browser supports CSS3:
Add div code:

<div class="boxshadow"><div id="MyContainer" style=" width:150px;">测试CSS3样式</div></div>

css style:

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

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

If the browser does not support the box-shadow attribute, call the following style

3. Use Modernizr to verify HTML5 required form fields
Add div code:
search:

JS code:

window.onload = function() {   // 获取表单input标签元素　　  var form = document.forms[0], inputs = form.elements; 　　  if (!Modernizr.input.autofocus) {      //因如果不支持 autofocus，那么该条件的求值结果为 true，并且 inputs[0].focus() 将光标放在第一个输入字段 　　　　      inputs[0].focus();    }　    if (!Modernizr.input.required) { 　　　form.onsubmit = function() { 　　　var required = [], att, val;　　  // loop through input elements looking for required  　　　　　　　　      for (var i = 0; i < inputs.length; i++) {　　　　att = inputs[i].getAttribute('required'); 　　　　　　　　　　        // if required, get the value and trim whitespace  　　　　　　　　　　　　        if (att != null) { 　　　　　val = inputs[i].value;           // if the value is empty, add to required array  　　　　　　　　　　　　　　　　          if (val.replace(/^\s+|\s+$/g, '') == '') { 　　　　　　　required.push(inputs[i].name);　　　　  } 　　  　}　    }       // show alert if required array contains any elements  　　　　       if (required.length > 0) { 　　　  alert('以下字段是必须的: ' + required.join(', ')); 　　　　// prevent the form from being submitted  　　　　　　        return false; 　    }      };　} }