8.2 如何给不支持新特性的浏览器打补丁
前面把HTML5表单的功能吹上了天，但要想实际使用则还有两个非常麻烦的问题：一是支持表单新特性的浏览器在具体实现上有所不同；二是对完全不支持新特性的浏览器如何处理。万幸的是，Web社区一如既往地拿出了解决办法。
回到第4章，我提过一个非常棒的JavaScript框架叫做Modernizr（http://www.modernizr.com），用于向缺少HTML5/CSS3特性支持的浏览器打补丁。由Alexander Farkas编写的“Webshims Lib”（http://afarkas.github.com/webshim/demos/）就是构建于Moderniz和无处不在的jQuery之上的，它可用于插入表单补丁（也可以为其他HTML5特性打补丁），从而使不支持新特性的浏览器可以处理HTML5表单。最值得称道的一点是，它利用了Modernizr的加载功能，能做到只加载实际所需的补丁。如果在原生支持HTML5新特性的浏览器中查看网页，则仅会给网页加入一丁点儿冗余代码。而对于老版本浏览器，虽然它们需要加载更多的代码（因为它们本身能力不足），但通过相关JavaScript方法的辅助，它们能提供基本一致的用户体验。
通过打补丁受益的不仅仅只是老版本浏览器。我们知道，现在的很多浏览器也没有完全实现HTML5的表单特性。在网页中引入Webshims Lib可以弥补这些浏览器的缺陷。例如在Safari中，提交一个必填项为空的HTML5表单时不会有任何警告信息。其实这个表单根本不会提交，但它也没给用户任何反馈，这一点都不人性化。在页面中引入Webshims Lib后，上述问题会得到弥补：
当Firefox（v9）无法给type＝"number"属性提供控制按钮的时候，Webshims Lib也可以提供一个合理的jQuery解决方案。总之，它是一个好用的工具，建议你立即下载这个小巧的工具包，然后在页面中使用，这样我们就可以继续编写HTML5表单，而所有用户都可以放心地看到他们需要的表单了（不包括使用IE 6且禁用JavaScript功能的那两个人——你知道我在说谁——快别这么干了！）。
首先下载Webshims Lib（http://github.com/aFarkas/webshim/downloads）并解压。然后将其中的js-webshim文件夹复制到相应的位置。为简便起见，本例中我将其拷贝到网站的根目录，然后在页面的<head>部分加入如下代码：
分析一下这段代码。首先引入了一个本地的jQuery库文件（可以在www.jquery.com上下载最新版本）：
接着，又引入了Webshims Lib所包含的Modernizr以及补丁相关的JavaScript文件：
最后，使用初始化脚本来加载所需的补丁：
搞定。现在，浏览器缺失的新功能都会通过相关补丁脚本被自动追加进来。太棒了！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论