Home > Developer > Web Develop
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 ;}};}}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
