你能描述一下渐进增强和优雅降级之间的不同吗?如果提到了特性检测，可以加分。

渐进增强（progressive enhancement）：一开始只构建站点的最少特性，然后不断地对不同的浏览器追加不同的功能

优雅降级（graceful degradation）：一开始就构建站点的完整功能，然后针对浏览器进行测试和修复

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

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。

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

   区别：

   优雅降级（gd）即功能衰减是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强(pe)则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。功能衰减意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

window.innerWidth/document.body.clientWidth/document.documentElement.clientWidth

特性检测 
      起初前端工程师们就极力反对浏览器检测，他们认为类似user-agent嗅探的方法是很不好的，理由是它并不是一种面向未来的代码，无法适应新版的浏览器。更好的做法是使用特性检测，就像这样： 

复制代码代码如下:

if (navigator.userAgent.indexOf("MSIE 7") > -1){ 
//do something 
} 

而更好的做法是这样： 

复制代码代码如下:

if(document.all){ 
//do something 
} 

这两种方式并不相同。前者是检测浏览器的特殊名称和版本；后者却是检测浏览器的特性。UA嗅探能够精确得到浏览器的类型和版本（至少能得知浏览器类型），而特性检测却是去确定浏览器是否拥有某个对象或者支持某个方法。注意这两者是完全不同的。 
因为特性检测依赖于哪些浏览器支持，当出现新版本浏览器的时候需要繁琐的确认工作。例如DOM标准刚出现的时候，并不是所有浏览器都支持getElementById()方法，所以一开始代码可能是这样： 

复制代码代码如下:

if(document.getElementById){ //DOM 
element = document.getElementById(id); 
} else if (document.all) { //IE 
element = document.all[id]; 
} else if (document.layers){ //Netscape < 6 
element = document.layers[id]; 
} 

这是特性检测很好的一个例子，亮点在于当其它浏览器开始支持getElementById()方法时不必修改代码。

例如考虑浏览器兼容性而获得浏览器窗口大小的几种方式：window.innerwidth/document.documentdocument.documentElement.clientWidth/dicument.body.clientWidth

   跨浏览器确定一个窗口的大小不是一件简单的事。Firefox.Safari.Opera和Chrome,ie9均为此提供了4个属性：innerWidth、innerHeight、 outerWidth和outerHeight。在Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸（无论是从最外层的window对象还是从某个框架访问）。在Opera中，这两个属性的值表示页面视图容器^①的大小。而innerWidth和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）。在Chrome中，outerWidth.outerHeight与innerWidth，innerHeight返回相同的值，即视口(viewport)大小而非浏览器窗口大小。
   IE9以下没有提供取得当前浏览器窗口尺寸的属性；不过，它通过DOM提供了页面可见区域的相关信息。
   在IE以及Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息。在IE6中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过do crunent.body.clientWidth和document.body.clientHeight取得相同信息。而对于混杂模式下的Chrome，则无论通过document.documentElement还是document.body中的clientWidth和clientHeight属性，都可以取得视口的大小。
       虽然最终无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小，如下所示：
       var pageWidth=window.innerWidth,
           pageHeight=window.innerHeight;
       if ( typeof pageWidth !="number")t
       if ( document.compatMode== "CSSICompat"){//确定页面是否处于标准模式
       pageWidth=document.documentElement.clientWidth;
       pageHeight=document.documentElement.clientHeight;
       } else{
       pageWidth=document.body.clientWidth;
       pageHeight=document.body.clientHeight;
       }
       }
   在以上代码中，我们首先将window.innerWidth和window.innerHeight的值分别赋给了pageWidth和pageHeight。然后检查pageWidth中保存的是不是一个数值；如果不是，则通过检查document.compatMode来确定页面是否处于标准模式。如果是，则分别使用document.documentElement.clientWidth和document.documentElement.clientHeight的直。否则，就使用document.body.clientWidth和document.body.clientHeight的值。

参照：http://www.jb51.net/article/21834.htm及http://www.soso.io/article/22521.html