Introduction to using Modernizr in HTML5 + CSS3

Introduction to using Modernizr in HTML5 + CSS3

Traditional browsers will not be completely replaced at present, making it difficult for you to embed the latest CSS3 or HTML5 functions into your website. Modernizr came into being to solve this problem. As an Open Source JavaScript library, Modernizr checks the browser's support for CSS3 or HTML5 functions. Modernizr does not try to add functions not supported by browsers of earlier versions, but allows you to modify the page design by creating optional style configurations. It can also simulate features not supported by browsers of earlier versions by loading custom scripts.

 

I. Prerequisites for using Modernizr:
1. Add reference: <script src = modernizr-latest.js type = text/javascript> </script>
2. Forward

Add "no-js" class to the element

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

Test the css style of CSS3:

.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, the following style is called.

 

3. Use Modernizr to verify the form fields required by html5.
Add the div code:
Search:

JS Code:

Window. onload = function () {// obtain the form input Tag Element var form = document. forms [0], inputs = form. elements; if (! Modernizr. input. autofocus) {// If autofocus is not supported, the result of this condition is true and inputs [0]. focus () Place 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 = 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 ('the following fields are required: '+ required. join (','); // prevent the form from being submitted return false ;}};}}