HTML5+CSS3使用Modernizr介绍_html/css_WEB-ITnose
程序员文章站
2024-01-26 16:30:40
...
传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。 Modernizr 并非试图添加老版本浏览器不支持的功能,而是令你通过创建可选风格配置修改页面设计。 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。
Modernizr下载地址:http://modernizr.com/download/
一.使用Modernizr前提条件:
1.添加引用:
2.向
二.使用Modernizr检测浏览器是否支持CSS3:
添加div代码:
css样式:测试CSS3样式
.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 0) { alert('以下字段是必须的: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } }
推荐阅读
-
HTML5+CSS3使用Modernizr介绍_html/css_WEB-ITnose
-
记一次页面优化及使用缓存机制_html/css_WEB-ITnose
-
css的负margin外边距功能简单介绍_html/css_WEB-ITnose
-
[Java]文档及javadoc使用_html/css_WEB-ITnose
-
css的负margin外边距功能简单介绍_html/css_WEB-ITnose
-
请教大神,使用js在文本段落后插入div图片容器,结果图片却显示到段落前了,代码如下。非常感谢!_html/css_WEB-ITnose
-
windows phone app 添加启动页面介绍新功能_html/css_WEB-ITnose
-
使用Axure RP原型设计实践01,使用概述_html/css_WEB-ITnose
-
beautifulsoup4说明,其为一个html解析器,使用方式简介如下:_html/css_WEB-ITnose
-
使用PHP把HTML生成PDF文件的几个开源项目介绍,