您的位置：首页 > Web前端 > JavaScript

HTML5系列四（特征检测、Modernizr.js的相关介绍）

2015-06-27 18:53 771 查看

Modernizr:一个HTML5特征检测库

Modernizr帮助我们检测浏览器是否实现了某个特征，如果实现了那么开发人员就可以充分利用这个特征做一些工作

Modernizr是自动运行的，无须调用诸如modernizr_init()之类的初始化方法

Modernizr的官网地址http://modernizr.com/



在官网首页你就可以下载modernizr.js（它分两个版本Development和Production版本。其实它们都会导向同一个下载页面，只不过前者会帮我们把选项预先勾上而已。）



当我把下载的modernizr.js引用到页面中时（这时我什么也没做），看如下的图片就知道modernizr.js是自执行的

使用了Modernizr后，页面中渲染后的html代码是这个样子的：



其中有很多以no作为前缀的class，当然大部分都没有这个前缀。事实上，如果一个类名以no作为前缀，比如 
no-touch
这表示浏览器不支持touch特性

modernizr还有一个test页面，大家可以在自己的浏览器里面打开这个test页面看看浏览器对于html5和css3的支持情况（据我所知chrome应该是对html5和css3支持最好的一个浏览器）

test页面的地址http://modernizr.github.io/Modernizr/test/index.html

HTML5特征检测（分别介绍使用JS原生方法检测及使用modernizr类库检测）

检测浏览器是否支持canvas API

/*
*@desc:检测浏览器是否支持canvas API
*/
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}


if (Modernizr.canvas) {
//support
} else {
//not support
}


检测浏览器是否支持canvas 文本API

//浏览器支持canvas API并不意味着支持canvas文本API（原因是绘制文本的函数是后来才被纳入规范中）
/*
*@desc:检测浏览器是否支持canvas 文本API
*/
function supports_canvas_text() {
if (!supports_canvas()) {
return false;
}
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}


if (Modernizr.canvastext) {
//support
} else {
//not support
}


检测浏览器是否HTML5的video

/*
*@desc:检测浏览器是否HTML5的video
*/
function supports_video() {
return !!document.createElement('video').canPlayType;
}


if (Modernizr.video) {
//support
} else {
//not support
}


检测视频格式

//检测视频格式
/*
*@desc:检测Mac 和iPhone支持的受专利保护的格式
*/
function supports_h264_baseline_video() {
if (!supports_video()) {
return false;
}
var v = document.createElement('video');
return v.canPlayType('video/mp4;codecs="avc1.42E01E,mp4a.40.2"');
}
/*
*@desc:检测被Mozilla Firefox和其它一些开源浏览器 支持的开放视频格式
*/
function supports_ogg_theora_video() {
if (!supports_video()) {
return false;
}
var v = document.createElement('video');
return v.canPlayType('video/ogg;codecs="theora,vorbis"');
}
/*
*@desc:WebM（一种开源的视频编码格式） 检测被Chrome FireFox Opera支持的开放视频格式
*/
function supports_webm_video() {
if (!supports_video()) {
return false;
}
var v = document.createElement('video');
return v.canPlayType('video/webm;codecs="vp8,vorbis"');
}


if (Modernizr.video) {
//可以播放视频格式 但播放哪种格式的呢
if (Modernizr.video.ogg) {
} else {
if (Modernizr.video.h264) {
} else {
if (Modernizr.video.webm) {
}
}
}
} else {
//not support
}


检测浏览器是否支持本地存储

/*
*@desc:检测浏览器是否支持本地存储
*/
function supports_local_storage() {
return ('localStorage' in window) && window['localStorage'] != null;
}


if (Modernizr.localstorage) {
//support
} else {
//not support
}


检测浏览器是否支持web worker

/*
*@desc:检测浏览器是否支持web worker
*/
function supports_local_storage() {
return !!window.Worker;
}


if (Modernizr.webworkers) {
//support
} else {
//not support
}


检测浏览器是否支持离线web应用

/*
*@desc:检测浏览器是否支持离线web应用
*/
function supports_offline() {
return !!window.applicationCache;
}


if (Modernizr.applicationcache) {
//support
} else {
//not support
}


检测浏览器是否支持地理定位

/*
*@desc:检测浏览器是否支持地理定位
*/
function supports_geolocation() {
return !!navigator.geolocation;
}


if (Modernizr.geolocation) {
//support
} else {
//not support
}


检测浏览器是否支持占位文本

/*
*@desc:检测浏览器是否占位文本
*/
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}


if (Modernizr.input.placeholder) {
//support
} else {
//not support
}


检测浏览器是否支持web worker

/*
*@desc:检测浏览器是否支持自动聚焦
*/
function supports_input_autofocus() {
var i = document.createElement('input');
return 'autofocus' in i;
}


if (Modernizr.input.autofocus) {
//support
} else {
//not support
}


还有很多，这里就不一一介绍了，总之，通过上面的特征检测可以知道，用modernizr.js更加方便，使用原生的方法相对来说会要复杂一些。

细说modernizr.js

Modernizr帮助我们检测浏览器是否实现了某个feature，如果实现了那么开发人员就可以充分利用这个feature做一些工作，反之没有实现开发人员也好提供一个fallback。

举例来说，当我们引入了Modernizr.js类库后， 
<html>
标签的class属性就会被相应的赋值，以显示浏览器是否支持某类CSS属性。比如在IE6下面，不支持boderradius特性，那么在 
<html>
标签中就会出现 
no-borderradius
类，我们可以做一些fallback的工作：

.no-borradius div{
/*-- do some hacks here --*/
}


上面我们已经介绍了，检测浏览器是否支持某项特性，我们可以用这种语法：

Modernizr.featuretodetect


再举一个通常的例子

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>')</script>


一般我们都会这样加载jQuery类库，先从Google CDN上拿，如果没拿到再加载本地的。

Modernizr.load()根据一些条件判断来动态选择加载CSS和JavaScript，这无疑对避免不必要的资源加载有极大的帮助。

那么上面的例子可以用Modernizr.load写成如下所示

Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
complete: function () {
if ( !window.jQuery ) {
Modernizr.load('js/libs/jquery-1.7.1.min.js');
}
}
},
{
// This will wait for the fallback to load and
// execute if it needs to.
load: 'needs-jQuery.js'
}
]);


事实上Modernizr.load最简单的语法如下所示：

Modernizr.load(
test: Modernizr.webgl,
yep : 'three.js',
nope: 'jebgl.js'
);


也就是当浏览器支持WebGL的时候，就引入 three.js 这个类库做一些3D效果。浏览器不支持WebGL的时候可以使用 jebgl.js 做一些fallback操作。

有兴趣可以去官网看看具体API
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航