css 渐进增强和优雅降级区别

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，
完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览
器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览
器进行 hack 使其可以在低版本浏览器上正常浏览。

优雅降级和渐进增强只是看待同种事物的两种观点。优雅降级和渐进增强都关注于同一网
站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及
这种关注如何影响工作的流程。

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“
过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限
定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览
器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小
的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大
的错误之外，其它的差异将被直接忽略。

渐进增强观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都
没提。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操
作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得渐进增
强成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式
浏览器支持 (Graded Browser Support)”策略的原因所在。

.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}