HTML5+CSS3 Using Modernizr Introduction

Traditional browsers are not currently completely superseded, making it difficult to embed the latest CSS3 or HTML5 features into your site. MODERNIZR was created to solve this problem, as an open source JavaScript library, MODERNIZR detects the browser's support for CSS3 or HTML5 functionality. Instead of trying to add features not supported by older browsers, Modernizr lets you modify the page design by creating an optional style configuration. It can also simulate features that are not supported by the old version browser by loading custom scripts.

modernizr:http://modernizr.com/download/

one. Using MODERNIZR Prerequisites:
1. Add Reference: <script src= "Modernizr-latest.js"  type= "Text/javascript" > </script>
2. add" No-js "to the

Two. Use Modernizr to detect if the browser supports CSS3:
Add div Code:

<div class= "Boxshadow" ><div id= "MyContainer" style= "width:150px;" > Test CSS3 style </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 property, call the following style

three. Use MODERNIZR Verifying HTML5 required form fields
Add div Code:
search:<input id= "Txtsearch" type= "search" name= "search" required= "true"/> <br/>
JS Code:

Window.onload = function () {//Get form input tag element var form = Document.forms[0], inputs = form.elements; if (! Modernizr.input.autofocus) {//Because if autofocus is not supported, the condition evaluates to True, and inputs[0].focus () places the cursor in the first input field 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 = i 　　　　　　　　　　        Nputs[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 (' The following fields are required: ' + required.join (', ')); PreventThe form from being submitted return false;　}      }; } }

HTML5+CSS3 Using Modernizr Introduction