关于渐进增强与优雅降级

相信谎言的人必将在真理之前毁灭。
渐进增强优雅降级 是网页设计的一种策略,强调可访问性,语义 HTML 标记,外部样式表和脚本技术,这两个观点是在 CSS3 出现之后才火起来的。
由于低级浏览器,比如 (特别是) IE6 等,不支持 CSS3 的浏览器,但是 CSS3 的样式又特别优秀不忍放弃,所以在高级浏览器中应用 CSS3 样式,在低级浏览器只保证基本功能。


背景介绍

渐进增强 是被 Steven Champeon 创造于 2003年3月11日 在奥斯汀的 SXSW 互动大会,并于 2003年3月和6月 间通过一系列 Webmonkey 教程文章的公布。谷歌公司是很支持这种开发方式,我认为渐进增强不仅是一个 前端开发思想,更加是一个 程序开发思想

Progressive Enhancement

在网页开发中,渐进增强认为 应该专注于内容本身。一开始针对低版本的浏览器构建页面,满足最基本的功能,再针对高级浏览器进行 效果交互追加各种功能 以达到更好用户体验。
换句话说,就是以最低要求,实现最基础功能为基本,向上兼容。
以 CSS 为例,以下这种写法就是渐进增强:

1
2
3
4
5
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
渐进增强也就是:一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

渐进增强的核心原则

  • 基本内容应该是被所有网络浏览器访问
  • 基本功能应该是被所有网络浏览器访问
  • 稀疏的,语义化的标记包含的所有内容
  • 增强的布局是由外部链接的CSS提供
  • 增强的行为是由外部链接的非侵入式JavaScript提供
  • 最终用户的网络浏览器偏好被受到尊重

Graceful Degradation

在网页开发中,优雅降级指的是一开始针对一个高版本的浏览器构建页面,先完善所有的功能。然后针对各个不同的浏览器进行测试、修复,保证低级浏览器也有基本功能 就好,低级浏览器被认为“简陋却无妨 (poor, but passable)”, 可以做一些小的调整来适应某个特定的浏览器。
但由于它们并非我们所关注的焦点,因此除了修复较 大的错误之外,其它的差异将被直接忽略。也就是以高要求,高版本为基准,向下兼容。
同样以css为例,优雅降级的写法如下。

1
2
3
4
5
.box {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
优雅降级也就是:一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

渐进增强与优雅降级的区别

优雅降级和渐进增强只是看待同种事物的两种观点。
优雅降级和渐进增强都关注于同一网站在不同设备里不同浏览器下的表现程度。

关键的区别则在于它们各自关注于何处,以及这种关注如何影响工作的流程。

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

渐进增强 观点则认为应关注于内容本身。
请注意其中的差别:连 “浏览器” 三个字都没提。
内容是我们建立网站的诱因:有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其 “分级式浏览器支持 (Graded Browser Support)” 策略的原因所在。
  • 如果你采用渐进增强的开发流程,先做一个基本功能版,然后针对各个浏览器进行渐进增加,增加各种功能。相对于优雅降级来说,开发周期长,初期投入资金大。 你想一下不可能拿个基本功能版给客户看呀,多寒酸,搞不好一气之下就不找你做了,然后就炸了。但是呢,也有好处,就是提供了较好的平台稳定性,维护起来资金小, 长期来说降低开发成本。

  • 那采用优雅降级呢,这样可以在较短时间内开发出一个只用于一个浏览器的完整功能版,然后就可以拿给 PM 找客户谈呀,可以拿去测试,市场试水呀,对于功能尚未确定的 产品,优雅降级不失为一种节约成本的方法。


案例分析

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

前缀CSS3(-webkit- / -moz- / -o-*)和正常 CSS3 在浏览器中的支持情况是这样的:

  1. 很久以前:浏览器 前缀CSS3 和 正常CSS3 都不支持
  2. 不久之前:浏览器 只支持 前缀CSS3,不支持 正常CSS3;
  3. 现在:浏览器 既支持 前缀CSS3,又支持 正常CSS3;
  4. 未来:浏览器 不支持 前缀CSS3,仅支持 正常CSS3.
  • 渐进增强 的写法,优先考虑老版本浏览器的可用性,最后才考虑新版本的可用性。在时期3前缀CSS3和正常CSS3都可用的情况下,正常CSS3会覆盖前缀CSS3。
  • 优雅降级 的写法,优先考虑新版本浏览器的可用性,最后才考虑老版本的可用性。在时期3前缀CSS3和正常CSS3都可用的情况下,前缀CSS3会覆盖正常的CSS3。
就 CSS3 这种例子而言,我更加推崇渐进增强的写法。因为前缀 CSS3 的某些属性在浏览器中的实现效果有可能与正常的 CSS3 实现效果不太一样,所以最终还是得以正常 CSS3 为准。
如果你好奇究竟是什么属性在前缀 CSS3 和正常 CSS3 中显式效果不一样,可以看看这篇文章 《需警惕CSS3属性的书写顺序》

如何抉择

如果软件开发的预算和时间充足,就不存在抉择的问题。然而现实很残酷,要么开发周期短,要么开发预算少,或者二者兼而有之,这个时候该如何抉择?

就我个人而言,讲讲我的观点。

根据你的用户所使用的客户端的版本来做决定。 请注意我的措辞,我没有用 浏览器,而是用 客户端。因为渐进增强和优雅降级的概念本质上是软件开发过程中低版本软件与高版本软件面对新功能的兼容抉择问题。

服务端程序很少存在这种问题,因为开发者可以控制服务端运行程序的版本,就无所谓渐进增强和优雅降级的问题。但是客户端程序则不是开发者所能控制的(你总不能强制用户去升级它们的浏览器吧)。我们所谓的客户端,可以指浏览器,移动终端设备(如:手机,平板电脑,智能手表等)以及它们对应的应用程序(浏览器对应的是网站,移动终端设备对应的是相应的APP)。

现在有很成熟的技术,能够让你分析使用你客户端程序的版本比例。

  • 如果低版本用户居多,当然优先采用渐进增强的开发流程;
  • 如果高版本用户居多,为了提高大多数用户的使用体验,那当然优先采用优雅降级的开发流程。

然而事实情况是怎么样的呢?绝大多数的大公司都是采用渐进增强的方式,因为业务优先,提升用户体验永远不会排在最前面。

例如:新浪微博网站前端的更新,拥有这种亿级用户的网站,绝对不可能追求某个特效而不考虑低版本用户可不可用,一定是确保低版本到高版本的可访问性,再去渐进增强,采用新功能给高版本用户提供更好的用户体验。

但也不是没有反例。如果你开发的是一款面向青少年的软件(或网站),你知道这个群体的人总是喜欢尝试新事物,总是喜欢酷炫的特效,总是喜欢把它们的软件更新到最新版本(而不像我们老一辈的用户)。面对这种情况,渐进增强的开发流程实为上选。

软件开发中,从来就没有银弹。具体的抉择,请读者视情况而定。


参考文献

  1. 渐进增强和优雅降级之间有什么不同?
  2. 前端开发之优雅降级与渐进增强
  3. 渐进增强---Wikipedia
  4. 优雅降级---Wikipedia
-------------本文结束 Euphoria 在此感谢您的阅读-------------

本文标题:关于渐进增强与优雅降级

文章作者:王钦弘

发布时间:2019年10月18日 - 21:05

最后更新:2019年10月19日 - 22:22

原始链接:https://www.wqh4u.cn/2019/10/18/关于渐进增强与优雅降级/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

您的支持将鼓励 Euphoria 继续创作!
(如果你还是学生请千万不要打赏,留点钱在学习上啊!)
0%