电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 响应式Web设计：使用HTML5和CSS3实践（14） [打印本页]

作者: look_w 时间: 2019-2-18 19:12 标题: 响应式Web设计：使用HTML5和CSS3实践（14）

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补丁脚本，从而保证这些在新旧浏览器上都能提供类似的用户体验。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)