Html5 学习之 Html5功能判断插件 Modernizr
---恢复内容开始---
Modernizr 浏览器对HTML5和CSS3开发的功能检测类库
由于当前用户使用的浏览器版本较多,对H5和CSS3的支持也各不相同。前端的开发者,在使用一些新的特性的时候,就比较的麻烦。需要去兼容各种浏览器,判断这些浏览器是否支持这些新的特性。
Modernizr可以帮助前端的开发者很好的解决这一问题。
Modernizr是什么?
用官网的话说,Modernizr是一个JavaScript库,在用户的浏览器中监测对HTML5和CSS3功能支持。这也是我们的目的所在。
下面我们来通过一个简单的例子来说明一下不同浏览器对HTML5和CSS3的支持。
比如对于的HTML5的Canvas标签的支持。就目前的浏览器来说,Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <canvas> 标签。但是ie9以下的版本是不支持Canvas的。
如果你的浏览器支持Canvas以下这段代码的效果就是下面的红色矩形图
<!DOCTYPE html>
<html>
<head>
<title>Modernizr</title>
<meta charset="utf-8" />
</head>
<body>
<canvas style="background-color:red;">您的浏览器不支持Canvas</canvas>
</body>
</html>
如果不支持,就会显示一段话:您的浏览器不支持Canvas;
Madernizr 是怎么检测浏览器对HTML5和CSS3的功能支持呢?
只需要简单的引入Madernizr.js 。类库可以从官网下载到。分为压缩版和未压缩版。
下载下来后,我们只要在页面引用既可。
然后打开页面。从运行后的代码页面我们可以看到在html 标签里面多出了一些东西。这写就是Modernizr监测你所使用的浏览器对HTML5和CSS3的支持情况。
仔细看一下会发现, 在touch属性前面多出了一个"no-"的标签。这个就表示所使用的浏览器不支持touch属性。但是当我使用浏览器的开发工具模拟手机浏览器时,这边我模拟的是ipone 4,touch属性前面就没有"no-"的标签。因为现在的触屏手机浏览器都是支持touch属性的。
知道了Modernizr可以监测到浏览器对HTML5和CSS3的支持情况。下面再看一下我们怎么用Modernizr。
我们就以touch属性为例。Modernizr在页面加载初始化后,会创建一个名为MNodernizr的对象。对象的每个属性都是检测浏览器对HTML5和CSS3的属性支持的布尔值。
<!DOCTYPE html>
<html>
<head>
<title>Modernizr</title>
<meta charset="utf-8" />
<script type="text/javascript" src="modernizr.js"></script>
<script type="text/javascript">
if (Modernizr.touch) {
alert("浏览器支持touch");
}else{
alert("浏览器不支持touch");
}
</script>
</head>
<body> </body>
</html>
另外不仅可以通过Javascript进行判断,还可以通过css的类名来进行判断。
<!DOCTYPE html>
<html>
<head>
<title>Modernizr</title>
<meta charset="utf-8" />
<script type="text/javascript" src="modernizr.js"></script>
<style type="text/css">
.yes,.no{display: none}
.touch .yes{display: block;}
.no-touch .no{display: block;} </style>
</head>
<body>
<div class="yes">支持touch属性</div>
<div class="no">不支持touch属性</div>
</body>
</html>
页面很简答,当页面加载Modernizr类库后,如果浏览器支持touch,页面就会显示"支持touch属性",反之则显示“不支持touch属性”。
另外一些浏览器支持HTML5标签,但是标签的属性支持的并不全,只是支持其中的一部分。比如Audio标签。
Audio可以实现ogg,mp3,wav,m4a这4中基本的视频格式,如果一些浏览器只支持其中的一种,或者2种格式怎么样,这时候我们就可以用Modernizr来解决。
<script type="text/javascript">
var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'xxx.ogg':
Modernizr.audio.mp3 ? 'xxx.mp3':
Modernizr.audio.wav ? 'xxx.wav':
'xxx.m4a';
</script>
首先我们先创建一个Audio的对象,然后给对象附加src属性。通过Modernizr.audio.ogg,mp3,wav,m4a进行判断。然后赋值对于的视频文件。
虽然HTML5的出现,可以让我们使用大量新的标签,但是在目前很多用户还没有升级到最新浏览器的情况下,为了更好的用户体验度,我们前端的开发人员还需要去兼容一些不支持新特性的浏览器。
比方说,某个应用需要实现获取用户的经纬度信息,这里我们可以借助HTML的Golocation功能,单是对于一些老版本的浏览器,还无法实现。我们就需要用地方的控件或者服务去实现。如百度,谷歌提供的一些接口。
为了让开发者不需要关心浏览器层面的兼容问题,这时需要实现一个与HTML5的Golecation应用程序接口相同的代码包,Modernizr在这方面也提供了了对应的加载支持,示例代码如下:
Modernizr.load({
test: Modernizr.geolocation, //判断条件
yep : 'geo.js', //支持geolocation加载的脚本
nopt: 'get-polyfill.js' //不支持geolocation加载的脚本
})
Html5 学习之 Html5功能判断插件 Modernizr的更多相关文章
- HTML5学习总结——HTML5入门与新增标签
一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...
- [html5] 学习笔记-html5音频视频
HTML5 最大的新特色之一就是支持音频和视频.在 HTML5 之前,我们必须使用插件如 Silverlight 或 Flash 来实现这些功能.在 HTML5 中,可以直接使用新标签< au ...
- HTML5学习笔记----html5与传统html区别
一. HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下: HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变. HTML5中 ...
- [html5] 学习笔记-html5增强的页面元素
在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...
- HTML5学习总结——HTML5新增属性与表单元素
一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...
- Html5学习系列
Html5学习系列 HTML5 规定了一种通过 video 元素来包含视频的标准方法 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.26 ...
- HTML5 学习总结(一)——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- HTML5 学习笔记(一)——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- HTML5 学习笔记--------》HTML5概要与新增标签!
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
随机推荐
- java-map-IdentityHashMap
1.背景 今天翻开IdentityHashMap的时候,就傻眼了,这个到底是个逻辑啊,我的程序代码如下: IdentityHashMap<String,String> identityHa ...
- eclipse中myBatis引入
1.添加config.xml配置文件 2.定义与数据库的数据实体映射类 3.创建操作表的是sql映射文件 即:mapper.xml 4.在配置文件config.xml中注册sql映射文件(步骤三创建的 ...
- shell脚本实例一,移动文件夹中大于2000B的文件到另一个文件夹
shell脚本能帮我们简化linux下的一些工作,现在有个需求,把TMPA文件夹下大于2000B的文件都移动到TMPB下 #! /bin/bash function movefiles() { ` d ...
- QT程序制作deb包并安装在应用程序菜单
制作原理:打包:将QT制作的源程序(没有编译的)用debian压缩打包(这里是用脚本对源程序再编译)安装:将deb包中的源程序解压(默认解压到根目录)到规定系统文件中并编译(postinst脚本)卸载 ...
- Android addView动态给Activity添加View组件
本文主要讲述如何动态给UI界面添加布局和控件,在编程的时候很多时候需要动态显示一些内容,在动态添加View的时候,主要使用addView方法. 1. addView方法简介 在Android 中,可以 ...
- android 通过post方式提交数据的最简便有效的方法
public boolean post(String username, String password) throws Exception { username = URLEncoder.encod ...
- COJ 0138 NOIP201108计算系数
NOIP201108计算系数 难度级别:A: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 给定一个多项式(ax + by)^k,请求出多项式 ...
- Codeforces Round #277.5 (Div. 2) --E. Hiking (01分数规划)
http://codeforces.com/contest/489/problem/E E. Hiking time limit per test 1 second memory limit per ...
- SQL-Employees Earning More Than Their Managers
思路: 今天复习数据库突然想起来leetcode上数据库的题目,就找来做了 (1)给表取别名 格式见code,这在自身连接的时候是很有必要的 (2)自身连接 from语句后面相当于接了“一张表”,如果 ...
- openstack手动部署简单记录
1,关于网络规划部分,之前写的都好好的了,浏览器TM的崩溃了,我写几天的笔记 记录全给我丢了,我TM的多心疼啊! 大致说了关于openstack手动安装关于网络规划的问题 第一种legacy netw ...