Introduction to HTML5 CSS3 using Modernizr_html/css

Introduction to HTML5 CSS3 using Modernizr_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:44:01

Original

994 people have browsed it

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>

Copy after login

css style:

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

Copy after login

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

Copy after login

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; 　    }      };　} }

Copy after login