HTML5+CSS3使用Modernizr介绍_html/css_WEB-ITnose-html教程-PHP中文网

HTML5+CSS3使用Modernizr介绍_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:44:01

原创

1169人浏览过

传统浏览器目前不会被完全取代，令你难以将最新的 css3 或 html5 功能嵌入你的网站。 modernizr 正是为解决这一难题应运而生，作为一个开源的 javascript 库，modernizr 检测浏览器对 css3 或 html5 功能支持情况。 modernizr 并非试图添加老版本浏览器不支持的功能，而是令你通过创建可选风格配置修改页面设计。它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。

Modernizr下载地址:http://modernizr.com/download/

一.使用Modernizr前提条件:
1.添加引用:
2.向元素添加“no-js”的类

二.使用Modernizr检测浏览器是否支持CSS3:
添加div代码:

立即学习“前端免费学习笔记（深入）”；

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

<div class="boxshadow"><div id="MyContainer" style=" width:150px;">测试CSS3样式</div></div>

登录后复制

css样式:

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

登录后复制

如果浏览器不支持box-shadow属性则调用下面的样式

三.使用Modernizr 验证 HTML5 必需的表单字段
添加div代码:
search:

JS代码:

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

登录后复制