传统浏览器目前不会被完全取代，令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生，作为一个开源的 JavaScript 库，Modernizr 检测浏览器对 CSS3 或 HTML5
功能支持情况。 Modernizr 并非试图添加老版本浏览器不支持的功能，而是令你通过创建可选风格配置修改页面设计。 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。
Modernizr下载地址:http://modernizr.com/download/
一.使用Modernizr前提条件:
1.添加引用:<script src="modernizr-latest.js" type="text/javascript" > </script>
2.向<html>元素添加“no-js”的类
<html class="no-js">
二.使用Modernizr检测浏览器是否支持CSS3:
添加div代码:
<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:<input id="txtsearch" type="search" name="search" required="true"
/> <br />
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;
}
};
}
}
时间： 2024-11-08 21:28:32