Question

在最后一章，我们将学习以下内容

渐进增强和优雅降级之间的根本区别

如何让老版本Internet Explorer支持响应式设计

何如使用Modernizr按需加载CSS文件

何如使用Modernizr按需加载JavaScript补丁文件

如何将超长导航列表在小视口中转换为选择菜单

如何为高分辨率（视网膜）显示屏提供匹配图片

在学习最后一章之前，先回顾一下我们当前的处境和状况。

移动设备使用量呈爆炸式增长。因此用户会使用各种各样的视口（不同的尺寸和方向）和带宽来浏览网页。在可预见的未来，我们需要以基本内容、分层特性和渐进增强为基准来设计和制作网站。此外，考虑到带宽差异，网站代码应该尽可能保持简洁和灵活。从设计角度看，我们已经完整学习了Ethan Marcotte提出的响应式设计的三种方法。CSS3媒体查询（第2章）用于创建设计断点，从而使网页布局可以完美匹配各种视口。而结合流动布局的弹性图片和多媒体技术（第3章），则可以保证网页在这些媒体查询断点之间的平滑过渡。响应式设计的结果就是设计不仅在今天流行的视口上表现完美，而且是面向未来的。

为了保持代码简洁，第4章我们将页面标签换成了HTML5。HTML5能提供更加精简和语义丰富的代码，而且为我们带来了诸如离线访问等新特性。此外，我们还在页面代码中使用了一些无障碍网页应用技术（WAI-ARIA）以增强可用性，为依赖屏幕阅读器和辅助技术的用户提供额外的帮助。

在第5章和第6章，我们领略了CSS3的强大威力和灵活性，学习了新的RGBA和HSLA颜色模式，以及如何不依赖图片而仅使用CSS3来制作盒阴影、文字阴影、背景渐变等各种常见的设计效果。此外，强大的CSS3选择器可以让我们选择DOM中任意需要的元素，而这种能力以往必须依靠JavaScript才能实现。但CSS3不只能用来调整设计效果或者大幅降低浏览网页所需的带宽消耗，更重要的是还为我们带来了一些在以往没有Flash或JavaScript就不敢奢望的新特性：自定义字体（第5章）以及不同视觉状态间的优雅平滑的过渡效果（第7章）。放眼未来，我们还了解了一些比较复杂的特性，如CSS3的3D转换。

最后在第8章，我们告别了单调乏味的表单制作体验，享受着使用HTML5标签来处理表单验证和创建表单元素的惬意。值得称道的是，我们还有条件地为一些老版本浏览器如IE6、7和8插入了JavaScript备用方案以提升用户体验。

从本书的开头到现在，我们用HTML5和CSS3完成了一个名为And The Winner Isn’t….的响应式网站。你可以通过http://www.andthewinnerisnt.com访问该网站。

下图展示了网站首页在iPhone上的显示效果：

在iPad上的显示效果：

在Android（模拟器）浏览器中的显示效果：

在现代桌面版浏览器（Google Chrome v16）中的显示效果：

以及在Internet Explorer 8中的效果：

我的妈呀！给我一把左轮手枪……

Internet Explorer 8中的效果惨不忍睹，因为它不支持<aside>、<header>、<nav>和<footer>等HTML5元素，这自然就引入了本章的主题——解决跨浏览器问题。