平稳退化（优雅降级）与渐进增强

    前段时间看《DOM编程的艺术》一书，在书里看到“平稳退化”(又称优雅降级)与“渐进增强”两个词，当时没有怎么在意，今天浏览到一片博客《为什么整个互联网行业都缺前端工程师》，这篇博客里也提到，要想成为一名优秀的前端工程师，就要明白如何使用平稳退化与渐进增强。所以，就有了学习的冲动了。

  1.概念

   （1）平稳退化（优雅降级）：

     首先使用最新的技术面向高级浏览器构建最强的功能及用户体验，然后针对低级的浏览器进行限制，逐步衰减那些无法被支持的功能及体验。使用平稳退化技术时，你必须首先完整的实现了网站，其中包括所有的功能和特效。 然后再为那些无法支持所有功能的浏览器增加候选方案，使之在旧市的浏览器上可以以某种形式降级体验却不至于完全失效。

     在我们日常的开发中，一个典型的平稳退化的例子就是：首先针对Firefox或者Chrome等支持W3C标准的浏览器编写页面代码，然后修复IE中的异常或针对IE去除那些无法被实现的功能特色。

    （2）渐进增强

     渐进增强的概念就是，指从最基本的可用性出发，在保证站点页面在低级浏览器中的可用性和可访问性的基础上，逐步增强功能及提高用户体验。

     我们日常的一些开发习惯，例如首先使用标记语言编写页面，然后通过样式表来控制页面样式等，都属于渐进增强的概念；其他更明显的行为包括使用HTML5、CSS3等新技术，针对高级浏览器为页面提高用户体验。

    渐进增强方案并不假定所有的用户都支持javascript，而总是提供一种候补方法，确保用户可以访问（主要的）内容。

   我们应该先让网站能够正常工作于尽可能旧的浏览器上，然后不断为它在新型浏览器上实现更多的增强和改进。随着时间的推移，当越来越多的人开始升级浏览器而浏览器本身的支持度也不断提升时，就会有越来越多的人体验到这些增强和改进，它持续有效的使网站越来越好，只要一次实现，它就让网站的体验与时俱进。

2.相关例子

（1）css渐进增强

（图片来源：http://www.fevte.com/tutorial-15239-1.html）

   在高级浏览器中可以发现，圆角与阴影。低版本的浏览器可以正常显示，高级浏览器支持CSS3.0的border-radius和box-shadow，因而会显示圆角和阴影。

    （2）javascript渐进增强

<script type="text/javascript">
 function displayMenu() {
    //显示导航列表;
 }
 </script>

 <a href="目标页面" onclick="displayMenu(); return false;">更多»</a>

   上面的例子提供了一个链接，如果浏览器支持javascript那么会执行onclick();显示导航列表，并且不发生跳转。如果不支持javascript，那么会打开一个页面。