谈谈对“渐进增强与平稳退化“的理解

平稳退化：

在google.com.hk的左上角，有一个更多的链接，它具有一个目标地址，但是当我们点击时，大多数情况发现的是弹出一个下拉列表供用户选择（这是一种典型的渐进增强形式）。怎么理解？——如果用户的浏览器支持javascript，那么就可以享受到这种快速导航的服务功能，有利于改善用户体验。

如果浏览器不支持javascript功能（可以尝试禁用浏览器的javascript)，再次访问google.com.hk，再次点击更多时，发生了什么？是的，没有看到下拉列表，而打开了一个新页面。（这是一种典型的平稳退化）。怎么理解？——如果用户的浏览器不支持javascript，用户仍然能够访问我的网站。

如何实现类似google的这一功能？

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

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

在这里，displayMenu()函数的作用就是显示出那个下拉菜单，

如果浏览器不支持javascript，onclick事件也就不会发生

如果浏览器支持javascript，onclick时发生displayMenu()函数，return false取消链接跳转。

这样，当用户的浏览器不支持javascript时，跳转到另一个页面显示出“更多”选项，而不是什么都不发生 ！

渐进增强：

在给网页加入内容后，就可以使用各种css属性控制内容的显示效果，css构成一个表现层。这个表现层就像网页一件华丽的外衣，穿着在文档的结构上，使各种网页丰富多彩。但即使去掉这个表现层，文档的内容也依然可以访问，只是缺乏色彩而已。

应该从最核心的部分，使用html架构良好的结构；然后再根据条件和运行环境，逐步加强这些内容。

所谓的“渐进增强”就是用一些额外的信息去包裹原始的文档的结构上，使网页丰富多彩。按照“渐进增强”的原则创建出来的网页基本上都符合“平稳退化”原则。

这里引入个人案例。

在ie6/7等低版本浏览器中，这个页面为了保证在所有浏览器都能正常的呈现内容，为这个页面建立低版本浏览器的基本外观

因为高版本浏览器支持各种css3属性，所以在此基础上加强了这个页面的显示效果(圆角及按钮阴影)

我认为“渐进增强”的基本原则就是充分利用网页的运行环境及条件，尽量为用户呈现效果更好的页面