渐进增强 VS 优雅降级 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了47479字，被86人关注，获得了216个喜欢
渐进增强 VS 优雅降级
一图胜千言
印象中，渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验，但是它们侧重点不同，所以导致了工作流程上的不同。
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本，向上兼容的很少。大多数软件都是向下兼容的，比如说Office2010能打开Office2007，Office2006，Office2005，Office2003等建的word文件，但是用Office2003就不能打开用Office2007，Office2010等建的word文件！
优雅降级和渐进增强只是看待同种事物的两种观点。优雅降级和渐进增强都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。
优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
渐进增强观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“”策略的原因所在。
看如下这两段代码的书写顺序，表示了我们开发的着重点。
.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;
前缀CSS3（-webkit- / -moz- / -o-*）和正常CSS3在浏览器中的支持情况是这样的：
很久以前：浏览器前缀CSS3和正常CSS3都不支持；
不久之前：浏览器只支持前缀CSS3，不支持正常CSS3；
现在：浏览器既支持前缀CSS3，又支持正常CSS3；
未来：浏览器不支持前缀CSS3，仅支持正常CSS3.
渐进增强的写法，优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性。在时期3前缀CSS3和正常CSS3都可用的情况下，正常CSS3会覆盖前缀CSS3。优雅降级的写法，优先考虑新版本浏览器的可用性，最后才考虑老版本的可用性。在时期3前缀CSS3和正常CSS3都可用的情况下，前缀CSS3会覆盖正常的CSS3。
就CSS3这种例子而言，我更加推崇渐进增强的写法。因为前缀CSS3的某些属性在浏览器中的实现效果有可能与正常的CSS3实现效果不太一样，所以最终还是得以正常CSS3为准。如果你好奇究竟是什么属性在前缀CSS3和正常CSS3中显式效果不一样，可以看看这篇文章《》。
如果软件开发的预算和时间充足，就不存在抉择的问题。然而现实很残酷，要么开发周期短，要么开发预算少，或者二者兼而有之，这个时候该如何抉择？就我个人而言，讲讲我的观点。
根据你的用户所使用的客户端的版本来做决定。请注意我的措辞，我没有用浏览器，而是用客户端。因为渐进增强和优雅降级的概念本质上是软件开发过程中低版本软件与高版本软件面对新功能的兼容抉择问题。服务端程序很少存在这种问题，因为开发者可以控制服务端运行程序的版本，就无所谓渐进增强和优雅降级的问题。但是客户端程序则不是开发者所能控制的（你总不能强制用户去升级它们的浏览器吧）。我们所谓的客户端，可以指浏览器，移动终端设备（如：手机，平板电脑，智能手表等）以及它们对应的应用程序（浏览器对应的是网站，移动终端设备对应的是相应的APP）。
现在有很成熟的技术，能够让你分析使用你客户端程序的版本比例。如果低版本用户居多，当然优先采用渐进增强的开发流程；如果高版本用户居多，为了提高大多数用户的使用体验，那当然优先采用优雅降级的开发流程。
然而事实情况是怎么样的呢？绝大多数的大公司都是采用渐进增强的方式，因为业务优先，提升用户体验永远不会排在最前面。例如：新浪微博网站前端的更新，拥有这种亿级用户的网站，绝对不可能追求某个特效而不考虑低版本用户可不可用，一定是确保低版本到高版本的可访问性，再去渐进增强，采用新功能给高版本用户提供更好的用户体验。但也不是没有反例。如果你开发的是一款面向青少年的软件（或网站），你知道这个群体的人总是喜欢尝试新事物，总是喜欢酷炫的特效，总是喜欢把它们的软件更新到最新版本（而不像我们老一辈的用户）。面对这种情况，渐进增强的开发流程实为上选。
软件开发中，从来就。具体的抉择，请读者视情况而定。
不用打赏，点击喜欢 ↓
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
玩转简书的第一步，从这个专题开始。
想上首页热门榜么？好内容想被更多人看到么？来投稿吧！如果被拒也不要灰心哦～入选文章会进一个队...
· 149654人關注
不用打赏，点击喜欢 ↓
选择支付方式：您所在的位置： &
1.3.1　渐进增强与优雅降级
1.3.1　渐进增强与优雅降级
机械工业出版社
《图解CSS3：核心技术与案例实战》第1章揭开CSS3的面纱，本章主要介绍了什么是CSS3、CSS3的发展状况、新特性，以及浏览器对CSS3的支持状况；同时，引进了渐进增强的设计理念。本节为大家介绍渐进增强与优雅降级。
1.3　渐进增强
第一次听到&渐进增强&（Progressive Enhancement）一词是在前端重构交流会上。渐进增强并不是一种技术，而是一种开发的方式，更是一种Web设计理念。首先思考一个问题：&网站是否需要在每个浏览器中看起来都一样？&带着这个问题来看渐进增强。
1.3.1　渐进增强与优雅降级
正如前面所言，渐进增强是一种开发方式，更是一种设计理念。在编写Web页面时，首先保证最核心的功能实现，让任何低端的浏览器都能看到站点内容，然后考虑使用高级但非必要的CSS和JavaScript等增强功能，为当前和未来的浏览器提供更好的支持，给用户带来更好的体验。
在设计的时候，先考虑低端设备用户能否看到所有内容，然后在此基础之上为高端用户进行设计。不仅为高端设备用户提供一个完美的应用，也要为不同性能级别设备的用户设计不同级别的不那么完美的应用。这称为&优雅降级&。
目前而言，虽对&渐进增强&有所了解的人很多，但是要说普及或深入还远远没到时候。在大家平时的设计思维中有一种极强的固定思维，也就是想让网站在各个浏览器下表现一致。这种出发点本身并没有什么问题，但是这样会让领先的浏览器的优势无法充分显示出来。
因此，从今天开始要改变制作Web站点的思维，让网站能优雅降级，目标应该是&&向尽可能多的用户提供尽可能优质的用户体验。这跟用户访问网站使用方式无关，无论通过iPhone、高端的桌面系统、Kindle，还是阅读器，用户都能得到尽可能独特且完美的体验。
喜欢的朋友可以添加我们的微信账号：
51CTO读书频道二维码
51CTO读书频道活动讨论群：【责任编辑： TEL：（010）】&&&&&&
关于&&的更多文章
这是一本介绍如何使用HTML5和JavaScript进行Android游戏开发的书
本书描述了黑客用默默无闻的行动为数字世界照亮了一条道路的故事。
讲师： 0人学习过讲师： 33人学习过讲师： 86人学习过
欢迎阅读本书。本书的目标是向信息技术（IT）专业人士
本书的核心是一个应用实例，它使用Web服务给用户传送
sdn（软件定义网络）是未来网络发展的趋势，它将网络
Python是目前流行的脚本语言之一。本书由浅入深、循序渐进地讲解如何使用Python进行程序开发。全书内容包括Python安装、开发工具
51CTO旗下网站前端开发之-优雅降级和渐进增强 - 前端迷
前端开发之-优雅降级和渐进增强
&>>&&>>&前端开发之-优雅降级和渐进增强
欢迎加入本站交流QQ群：
1 次，平均分
当在看一些css3效果demo的时候，发现有些写css3属性时，兼容性的写法顺序不太一样，比如transition属性，有些把transition放在前面有些是放在后面，当然这也有可能包含了coder个人的习惯或是强迫性，比如下面这两种：
.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;
咋一看两个概念差不多，都是在关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。
什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
除特别注明外，本站所有文章均为原创，转载请注明出处来自
本站汇集前端开发教程与技巧、交互设计、插件、网页特效、PSD素材、模板源码、网页设计等素材，相关内容均保证绿色安全、优质实用，欢迎大家多多交流，期待共同学习进步。
如果您有站务合作方面的需求，请通过以下方式联系我。QQ: Email: (#换成@)
您也可以使用第三方帐号快捷登录
扫一扫二维码分享推荐这篇日记的豆列
······什么是渐进增强和优雅降级
何为渐进增强、优雅降级
常用两种策略：要么优雅降级（graceful
degradation，一开始就构建站点的完整功能，然后针对浏览器测试和修复），要么渐进增强（progressive
enhancement，一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。
两者间的（微妙）差别
万一你正挠着后脑勺，试图找出“优雅降级”和“渐进增强”之间的差别，那么我可以告诉你：“它们是看待同种事物的两种观点”。“优雅降级”和“渐进增强”都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如
IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)”
的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被
Yahoo! 所采纳并用以构建其“”策略的原因所在。
GD和PE的区别在于：功能衰减是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。功能衰减意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}