Introduction to using Modernizr in HTML5 + CSS3, html5modernizr

Source: Internet
Author: User

Introduction to using Modernizr in HTML5 + CSS3, html5modernizr

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.

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

I. Prerequisites for using Modernizr:
1. Add reference: <script src = "modernizr-latest.js" type = "text/javascript"> </script>
2. Add the "no-js" class to the <Html class = "no-js">

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

<Div class = "boxshadow"> <div id = "MyContainer" style = "width: 150px;"> test the CSS3 style </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, the following style is called.

3. Use Modernizr to verify the form fields required by html5.
Add the div code:
Search: <input id = "txtsearch" type = "search" name = "search" required = "true"/> <br/>
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 ;}};}}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.