响应式Web设计：使用HTML5和CSS3实践 （14）

look_w

8.2 如何给不支持新特性的浏览器打补丁

尽管说了很多HTML5表单的新特新，但实际使用的时候 （1）支持表单新特性的浏览器在具体实现上有所不同（2）对完全不不支持新特的浏览器如何处理。

第四章提过一个Modernizr的JavaScript框用于向缺少HTML5/CSS3特性支持的浏览器打补丁，Webshims Lib就是构建于Modernizr和jQuery之上的。

它利用了Modernizr的加载功能，只加载实际所需要的补丁。

通过打补丁不仅使老版本的浏览器受益，很多新的刘浏览器也没有完全实现HTML5的表单特性，网页中引入Webshims Lib可以修补这些浏览器的缺陷。

Webshims Lib的使用很简单：

    下载Webshims Lib包，解压
    从包解压出来的文件夹中导入依赖的jQuery、Modernizr、polyfiller文件
    执行javascript: $.webshims.polyfill() 来初始化脚本用于加载所需的补丁

8.3 使用CSS3美化HTML5表单

作者使用第七章介绍的CSS3知识，用类似圆角、阴影等属性稍微润色了下表单，此处略过。除了之前学习的CSS3属性外，CSS3还专门提供了一些针对表单的伪类选择器：

    input:required
    input:focus:invalid
    input:focus:valid

可以通过这些伪类来书写一些样式规则，从而增强表单的用户体验。
8.4 小结

本章学习了如何使用一堆新的HTML5表单属性，从而让表单更加好用。并且我们介绍了如何使用工具来进行JavaScript对象检测有条件地加载JavaScript补丁脚本，从而保证这些在新旧浏览器上都能提供类似的用户体验。