13.10　使用polyfill实现渐进增强

13.10　使用polyfill实现渐进增强

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

图13-13所示的网站就是渐进增强的一个实例，通过渐进增强，该网站使用CSS3为现代浏览器提供更丰富的体验。在旧的浏览器（如IE8）中，该网站呈现出稍微不同的视觉体验，但功能并未削减，如图13-14所示。

如果想弥合较弱的浏览器与较强的浏览器的差异，可以使用polyfill［通常又称为垫片（shim）］。

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

Modernizr（http：//modernizr.com）是一个JavaScript库，它允许探测浏览器是否支持创建优化的网站体验所需的特定的HTML5、CSS3及其他特性。在该网站上可以找到更多关于渐进增强的信息，包括负责填补旧的浏览器与新的Web技术差异的各类polyfill，如图13-15所示。

图13-13　网站使用了一些CSS3属性

图13-14　IE8不支持圆角，显示时变成直角

图13-15　Modernizr网站