14.3　使用polyfill实现渐进增强

渐进增强是如今被普遍接受的一种建立网站的方式，它强调创建所有用户都能访问（无论使用什么样的Web浏览器）的基本层面的内容和功能，同时为更强大的浏览器提供增强的体验。简单地说，渐进增强意味着网站在不同Web浏览器中的外观和行为不一样是完全可以接受的，只要内容是可访问的。

Dribbble网站（http://dribbble.com）就是渐进增强的一个实例，如图14.3.1所示。通过渐进增强，该网站使用CSS3为现代浏览器提供更丰富的体验。在旧的浏览器（如Internet Explorer 8）中，该网站呈现出稍微不同的视觉体验，但功能并未削减，如图14.3.2所示。

图14.3.1　Dribbble网站使用了一些CSS3属性，如border-radius和CSS3渐变背景，为使用现代浏览器的用户提供更为丰富的体验，同时，它也记得为功能较弱的浏览器着想

图14.3.2　在不支持border-radius的旧的浏览器（如Internet Explorer 8）中查看该网站，体验就会发生改变。圆角（如那些药丸状的导航按钮的圆角）变成直角了，但功能并未损失，一切照常工作。这是渐进增强在实践中的一个方面

如果你想弥合较弱的浏览器与较强的浏览器之间的功能差异，可以使用polyfill（通常又称垫片，shim）。

polyfill通常使用JavaScript实现，它可以为较弱的浏览器提供一定程度的对HTML5和CSS3的API和属性的支持，同时，当浏览器本身就具有相应的能力时，会不动声色地退而使用官方的支持。需要注意的是，这样做通常会对性能产生一定的负面影响，因为较弱的Web浏览器（尤其是旧版本的Internet Explorer）运行JavaScript的速度要慢得多。

Modernizr的网站（www.modernizr.com）上可以找到更多关于渐进增强的信息，包括负责填补旧的浏览器与新的Web技术之间差异的各类polyfill。Modernizr是一个JavaScript库（参见图14.3.3），由于Faruk Ateş于2009年创建。目前团队成员还包括Paul Irish、Alex Sexton和Ryan Seddon。更多关于Modernizr的信息参见提示。

图14.3.3　Modernizr是一个JavaScript库，它允许你探测浏览器是否支持创建优化的网站体验所需的特定的HTML5、CSS3及其他的特性

提示　如今，浏览器要么鼓励用户定期下载新的版本（Firefox、Safari和Internet Explorer均采用这种方式），要么悄无声息地在后台下载更新（Chrome就采用这种方式）。

提示　当新的或实验性的CSS可用时，基于JavaScript的工具（如Modernizr）可以提供暗示，从而允许你使用CSS和JavaScript对页面进行渐进增强，为更强的浏览器提供更为丰富的体验，同时不至于扔下其他的浏览器不管。

提示　GitHub上有一份由社区维护的关于实用的JavaScript polyfill的列表（https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills），如图14.3.4所示。这份列表也是Modernizr项目的一部分。其中，CSS3 Styles部分里的项目尤其有趣，如Jason Johnston的PIE（www.css3pie.com），它可以为Internet Explorer 6～9针对很多本章将要介绍的CSS3效果提供支持（其中，IE9仅在需要显示线性渐变时用得上PIE，对于其他的效果，IE9具有原生的支持）。注意，使用PIE可能影响网站在这些旧的浏览器中运行的性能。

图14.3.4　不断增长的JavaScript polyfill列表。JavaScript polyfill可以为并不原生支持HTML5和CSS3特性的旧的浏览器提供这方面的支持