本节书摘来自异步社区《HTML5实战》一书中的第2章，第2.5节，作者： 【美】Rob Crowther , Joe Lennon , Ash Blue , Grey Wanish 更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.5 为不支持HTML5相关特性的浏览器提供回退方案
使用HTML5新特性的一个主要缺点就在于并不是所有浏览器都支持它们。所以你要照顾两个方面：那些最新、功能最强大的浏览器，以及稍微老旧一些的浏览器。
本节主要学习内容
- 对于HTML5特性，了解Modernizr是如何简化了对浏览器支持的侦测操作并加载回退方案的。
- 如何利用polyfill来弥补浏览器支持不足的状况，这是一个JavaScript回退方案，只有当所用浏览器缺乏原生支持时，该方案才起作用。
- 如何使用JavaScript对那些尚不能完整支持约束验证API的浏览器实现基本的回退性验证。
在逐步完善表单的同时，通过以下3步，你就能了解到以上内容。 - 第1步：构建特性侦测，对月份选择器进行回退性处理。
- 第2步：针对Safari 5.1，构建回退性的限制验证。
- 第3步：针对IE9，构建回退性的限制验证。
但是，首先让我们大概了解一下如何利用Modernizr进行特性侦测。
2.5.1 利用Modernizr侦测特性并加载外部资源
在利用HTML5新特性时，有一个很重要的概念，那就是特性侦测：测试浏览器是否支持指定特性。遗憾的是，特性侦测的方法有很多，它们之间的差异性又很大，很难记住每个特性的侦测方法。另一个麻烦是，有时，你可以会需要在浏览器支持（或不支持）指定特性时，才加载某个外部资源。比如说，如果浏览器不支持WebGL，那么为什么还要加载一个大型WebGL架构呢？同样道理，当用户所用浏览器本身自带一个颜色选择器部件，那我们为什么还非得加载一个颜色选择器部件库呢？动态加载外部资源完全可以做到，但用JavaScript处理起来可没有那么简单。
Modernizr这个JavaScript库可以完美实现特性侦测与资源的动态加载。在Web页面中包含了Modernizr，就能用十分简单的语法格式来侦测特性支持，比如说，要想查看浏览器是否支持< Canvas >元素，只需用下面代码即可：
如果不使用Modernizr来侦测浏览器的Canvas支持，则需要用下面这些代码：
基于特性测试，利用Modernizr动态地加载外部资源也很方便（.js与.css都可以）。Modernizr判断浏览器是否支持localStorage API，如果支持，就加载localstorage.js文件，该文件中的代码可能会与localStorage API产生相互作用。如果不支持，就加载localstorage-polyfill.js这个回退性方案。
接下来，就让我们看看polyfill概念，以及它又是如何能够弥补那些不支持相关特性的浏览器的。
2.5.2 使用polyfill和Modernizr来弥补缺陷
polyfill这个术语是由Remy Sharp发明的，用来指代那些能够实现API规范中所缺失部分的代码。该词来源于polyfilla，建筑工人用的一种能够修补墙壁裂缝或缺口的产品。同样，借助Polyfills，Web开发者可以弥合不同浏览器对HTML5特性支持度不一的“缺口”。
提示
Paul Irish，Modernizr库的主要代码贡献者之一，编辑并维护着一个综合性列表，内容涉及polyfill、shim以及HTML5多种特性的回退方案，等等。访问Modernizr的GitHub wiki可以看到这个列表：http://mng.bz/cJhc。
第1步：部署特性侦测，有条件地为月份选择器部署回退方案
下面介绍如何使用Modernizr为没有内建月份选择器的浏览器加载一个月份选择器polyfill。请将本章源代码中的monthpicker.js拷贝到你在本章创建其他文件所用的目录，将代码清单2-13所示的代码添加到init函数的末尾，直接紧跟着你在上一步骤中所创建的代码下面。
如果浏览器本身并不支持month输入类型，那么加载订单时，标准文本输入框就会被一个带有月份下拉列表和年份选择器的输入字段所替代，如图2-12所示。
大多数的HTML5表单功能都能运用这项技术。实际上，针对目前HTML5整个表单特性在各个浏览器中受支持度不一致的状况，一些项目正在力图弥补这种差异，主要包括以下这些项目。
- Webshims Lib by Alexander Farkas。
- H5F by Ryan Seddon。
- Webforms2 by Weston Ruter。
- html5Widgets by Zoltan “Du Lac” Hawryluk。
本章最后内容将要实现一些基本的验证，甚至包括那些并不支持约束验证API的浏览器。
2.5.3 不借助约束验证API实现验证
如果在Safari 5.1或者其他一些浏览器的旧版本（如IE9）上加载这个订单页面，验证功能并不能生效，表单不必经过任何验证就能提交。本节介绍如何使用JavaScript来执行验证，以及在验证发现错误时，如何阻止表单提交。
第2步：针对Safari 5.1，构建约束验证的回退方案
Safari 5.1对约束验证API的支持并不全面。例如，表单中的< input >元素含有required属性集合，那么该元素将无法在Safari 5.1中通过验证。但Safari并不能实现任何UI特性，比如它无法显示无效元素旁边紧挨着的错误消息提示；另外，当表单出错时，Safari也无法阻止表单的提交。下面，我们先来考虑一下如何为用户显示错误消息提示，将代码清单2-14所示的代码放入app.js文件中，让它们紧跟在上一步完成的代码后面。
现在，如果用Safari 5.1加载并试图提交带有无效字段的表单，那么页面就会显示错误消息提示，如图2-13所示。而且，无效字段也会以高亮的红色显示出来。这种提示错误的方法并不是最恰当的，实际上，你也许应该学习其他浏览器的处理方式，在第一个错误出现的地方附近显示一个气泡状的错误消息提示。
第3步：针对IE9，构建约束验证回退方案
让我们来看一下本章的最后一个问题。在IE9中，如果有输入字段未能通过早先编写的自定义验证测试，那么在提交表单时，就会看到错误消息提示。这看起来很棒，但是，IE9并不支持标准的基于属性的验证参数以及email输入类型。为了改进这个缺陷，我们需要创建一个函数，用它来扫描表单中的输入字段属性required和pattern，以及email输入类型。在应用收集到这些字段后，再对这些字段的有效性进行验证。具体实现代码如代码清单2-15所示，将它们添加到上一步实现的代码后面。
选择var模式只是为了简洁，而不是因为可靠。设计一种好的模式基于很多情况，这超出了本书的范围。要想使用这个代码，需要在验证表单时，调用fallbackValidation函数。在app.js中找到validateForm函数，将下面这个代码段放到`javascript
if(order- Form.name.value.length < 4) {
<div style="text-align: center">
<img src="https://yqfile.alicdn.com/e867d9da522aded7b56a0de9d1b26baa3621c0a7.png " >
</div>
上面这个代码段利用了Modernizr来测试浏览器是否支持required和pattern属性，如果不支持，则将调用fallbackValidation函数。如果在IE9中运行这个实例，则会看到不仅会产看required、pattern和email，还能看到自定义验证。
