使用Modernizr探测HTML5/CSS3新特性

时间 2019-11-30

标签使用 modernizr 探测 html5 html css3 css 特性栏目系统安全繁體版

原文原文链接

HTML5, CSS3以及相关技术（例如canvas和web sockets）带来了很是有用的特性，可让咱们的web程序提高一个新的level。这些新技术容许咱们只用HTML,CSS和JavaScript就能够构建包括在平板和移动设备上可以运行的多样化表单页面。HTML5虽然提供了不少新特性，可是若是咱们不考虑旧版本的浏览器就是用这些新技术也不太现实，老版本浏览器已经使用了不少年，咱们依然须要考虑这些版本的兼容性问题。本文要解决的问题就是：在咱们使用HTML5/CSS3技术的时候，如何更好地处理不支持HTML5/CSS3特性的旧版本浏览器问题。

尽管咱们能够本身写代码来判断浏览器是否支持某些HTML5/CSS3特性，可是代码都不是很简单。例如：写代码判断浏览器支付支持canvans，咱们的代码可能和下面的相似：javascript

若是要判断是否支持本地存储（local storage），代码可能和下面的相似，可是很容易再Firefox下产生bug。css

前面2个例子都是分别检查一个特性，若是有不少HTML5/CSS3特性的话，咱们不得不写多份代码来判断，不过还算幸运的是这些代码没有依赖顺序。Modernizr可让你用不多的代码来实现上述复杂的功能，让咱们来看一下Modernizr的一些重要特性：

开始使用Modernizr

第一次我听到Modernizr的时候，我觉得它的意思是modernized，能够在旧版本浏览器上添加一些HTML5/CSS3的新特性。事实上，Modernizr不是干这个的，它是帮助咱们提升开发实践的，使用一个很是时髦的方法来帮助探测浏览器是否支持某种新特性，甚至能够加载额外的script脚本。若是你是一个web开发人员的话，那对你来讲它就是一件很牛逼的兵器。

Modernizr官方站点：http://modernizr.com，2个类型的脚本你均可以使用（开发版和自定义的生产版本）。网站提供了一个自定义需求的工具来生成仅仅你须要的探测功能，而不是一个什么均可以探测的大而全的版本，就是说你可让你的脚本最小化。下图是官方网站生成工具的界面，能够看到不少HTML5/CSS3和相关技术的探测功能均可以选择上。html

下载完你自定义的脚本之后，你就能够像引用普通js文件同样引用它了，而后就能够用了。html5

Modernizr和HTML元素

添加完Modernizr引用之后，它就当即生效了。运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称做为一个class（例如:canvas,websockets），不支持的特性显示的class是“no-特性名称”（例如：no-flexbox）。下面这段代码是运行在Chrome下的效果：java

下面这段代码是运行在IE9下的效果：jquery

使用Modernizr，有可能会出现下面代码的状况（添加no-js名称到class里）：git

你能够访问(http://html5boilerplate.com)站点查看HTML5 Boilerplate相关的内容，或者(http://initializr.com)查看Initializr相关的内容，添加no-js class到html元素下，是告诉浏览器是否支持JavaScript，若是不支持就显示no-js，若是支持就把no-js删掉。很是爽，对吧？

结合HTML5/CSS3特性一块儿使用

你能够直接使用Modernizr在<html>元素里生成的class名称，在你的css文件里定义相应的属性以便支持当前浏览器。例如，下面的代码能够属性，在支持shadow阴影的浏览器显示shadow，不支持的浏览器显示标准的边框：github

.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-shadows的话，Modernizr就会将boxshadow class添加到<html>元素，而后你能够将它管理到一个相应的div的id上。若是不支持，Modernizr就会将no-boxshadow class添加到<html>元素，这样显示的就是一个标准的边框。这样咱们就能够很方便地在支持CSS3特性的浏览器上使用CSS3新功能，不支持的浏览器上继续使用之前的方式。

Modernizr除了添加相应的class到<html>元素之外，还提供一个全局的Modernizr JavaScript对象，该对象提供了不一样的属性来表示某种新特性在当前浏览器下是否支持。例如，下面的代码能够用于判断浏览器是否支持canvas和local storag。对于多个开发人员在多版本浏览器下开发测试的时候颇有好处的，你们能够统一代码。web

$(document).ready(function () {
if (Modernizr.canvas) {
//Add canvas code
}

if (Modernizr.localstorage) {
//Add local storage code
}
});

全局的Modernizr对象也能够用来探测是否支持CSS3特性，下面的代码用于测试是否支持border-radius 和CSS transforms:ajax

$(document).ready(function () {
if (Modernizr.borderradius) {
$('#MyDiv').addClass('borderRadiusStyle');
}

if (Modernizr.csstransforms) {
$('#MyDiv').addClass('transformsStyle');
}
});

其它的一些CSS3特性能够探测到结果，例如：opacity, rgba, text-shadow, CSS animations, CSS transitions, multiple backgrounds等等，Modernizr支持的完整的HTML5/CSS3可探测列表能够在以下http://www.modernizr.com/docs找到。

使用Modernizr加载Script脚本

在某些不支持新特性的浏览器上，Modernizr不只仅提供了上述方式告诉你，也提供了load功能容许你加载一些shim/polyfill脚原本达到支持的目的（关于shim/polyfill的信息请访问：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills）。Modernizr提供了一个脚本加载器来判断一个功能，若是不支持就加载相应的脚本。单独的脚本也能够在http://yepnopejs.com找到。

可使用Modernizr的load()函数来动态加载脚本，该函数的test属性是代表要测试是否支持的新特性，若是测试成功支持的话，就加载yep属性设置的脚本，若是不支持就加载nope属性设置的脚本，不论是否支持，both属性里设置的脚本都会加载的。例子代码以下：

Modernizr.load({
test: Modernizr.canvas,
yep: 'html5CanvasAvailable.js’,
nope: 'excanvas.js’,
both: 'myCustomScript.js'
});

在该例子里，Modernizr会判断当前浏览器是否支持canvas特性，若是支持，那就会加载html5CanvasAvailable.js和myCustomScript.js这两个脚本，若是不支持，就会加载excanvas.js（用于IE9以前的版本）脚本文件以让该浏览器支持canvas功能，而后再加载myCustomScript.js脚本。

由于Modernizr能够加载脚本，因此你还能够用于其它的用途，好比，若是你引用的第三方脚本（例如提供CDN服务的Google和Microsoft提供jquery的托管）加载失败的状况下，能够加载备用的文件。下面的代码是Modernizr提供的一个加载jquery的示例：

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

该代码会首先从Google CDN加载jQuery文件，若是下载或加载失败，complete函数就会执行，首先判断jQeury对象是否存在，若是不存在，Modernizr就会加载定义好的本机js文件，若是连 complete里的文件都加载不成功，就会加载needs-jQuery.js文件。

总结：

若是你正在使用最新的HTML5/CSS3来构建你的程序，Modernizr绝对是一个必需的工具。使用它你能够节约不少代码以及测试工做量，甚至能够对一些不支持新特性的浏览器经过额外加载脚本的形式来实现相应的新特性。