Home  >  Article  >  Web Front-end  >  Introduction to HTML5 CSS3 using Modernizr_html/css_WEB-ITnose

Introduction to HTML5 CSS3 using Modernizr_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:44:01983browse

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn