成长脚印-专注于互联网发展
【读书笔记】“CSS3使用指南”之“渐进增强与优雅降级”
post by:天之骄子 2013-8-4 22:52

    级别各异的浏览器支持度意味着你的页面在不同的浏览器中可能看起來不太一样,这没什么,而且坦白讲,无论你是否使用CSS3,这种情况都将不可避免地存在。因为终端媒体天生就具备用户可控的性质,所以Web页面从来都无法保证在任何地方都表现一致。而且在如今这个时代,设备、屏幕、浏览器的形态越来越丰富,人们的惯用设置也不尽相同,因此想要创造一个在任何地方都表现一致的页面就更加不可能了。
    只要你关注于所向所有人提供实用且易用的页面,那么表现上的差异就没那么重要。而这就是 “渐进增强”哲学的思想所在。

渐进增强
渐进增强
    渐进增强(Progressive Enhancement)是这样一种开发方式:在你编写Web页面时,首先让 它们在基础的浏览器和设备上正常工作且展现得当,然后再辅以更髙级但非必要的CSS和 JavaScript等增强功能,来为当前和未来的浏览器提供更好的支持。
    举例来说,你可以用朴素但 语义化的HTML构建一个表单,即使没有样式它也能得到良好的展现,禁用JavaScript后它也可 以正常工作,随后你吋以用CSS来丰富其外观,再使用JavaScript增加客户端层面的验证。我们 的目标是,利用现代浏览器的优势特性,在确保网站能适用于每个用户的同时去创造尽可能丰富的体验。Designing with Progressive Enhancement(http://www.filamentgroup. com/dwpe/ 本书中文版即将由人民邮电出版社出版。——编者注)一书对此有很好的总结:

    渐进增强……其目标是向尽可能广泛的受众提供尽可能优质的体验。跟用户访问网站所采用方式无关,无论是通过iPhone、高端的桌面系统、Kindle,还是读屏器,他们所能得到的体验应该尽可能的独特且完备。


优点
    虽然“向尽可能广泛的受众提供尽可能优质的体验”这一伟大目标听起来相当不错,但其实 不使用渐进增强技术你也可以实现它,比如为旧式浏览器提供一套兼容方案来确保页面与其在新式浏览器下的表现和行为尽量保持一致,但这通常并不是明智的选择。改用渐进增强技术能够让网站的视觉丰富程度随着浏览器的现代化发展而不断提升,用户和你都能从中受益。
优雅降级
    你或许对优雅降级(Graceful Degradation)这个术语非常熟悉,并且认为它与渐进增强有着相同的含义。但实际上它们是两种完全相反的处理方式,尽管通常会带来同样的效果。使用 优雅降级技术时,你必须首先完整地实现了网站,其中包括所有的功能和效果。然后你再为那 些无法支持所有功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
    而使用渐进增强时,无需为了让一个已成型的网站在旧式浏览器下正常工作而做逆向工 程。首先,只需要为所有的设备和浏览器准备好清晰且语义化的HTML以及完善的内容,然 后再以无侵入(unobtrusive)的方式向页面增加无害于基础浏览器的额外样式和功能。当浏览 器升级时,它们会自动地呈众出来并发挥功用。本书示例中有渐进增强技术的诸多实践,每个 示例页面首先都能正常地显示并工作,然后再通过CSS3使之得到增强。
    首先,为了在支持度较低的浏览器也能实现相同的效果而添加Hack、兼容方案、模拟性 脚本或其他技术将会耗费大量的人力和时间。即使最终你(在所能测试的有限数量的用户环 境之下)实现了近乎一致的表现,但问题是用户真正收获了什么?与其试图让正看起来堪比 年轻它十岁的浏览器,不如努力改善网站的可访问性,或是进行更多的可用性测试,或是去 实现其他真正可以帮到用户的改进工作,而不仅仅是让页面看起来“更靓一点' 。
    除此之外,如我之前所言:想让网站在任何环境下看起来都保持一致是不可能的,不为 此付出多少努力,结局依旧会令你失望。因此,如果网站无论如何都看起来不同,那么为什么不用CSS3技术来使它在新式浏览器上看起来更为惊艳呢?某些CSS3特性在不支持它的浏览 器中简直是“无法模拟实现”的,但若使用渐进增强,就无需为了能让你的网站适合所有人而 放弃这些技术。仅仅因为部分人不愿或不能升级浏览器,却让使用新型浏览器的用户无法享受 CSS3所提供的伟大技术,这是亳无道理可言的。我们应该先让网站能够正常工作于尽可能旧的浏览器上,然后不断为它在新型浏览器上实现更多的增和改进。这个方法可以让每个用户都得到对他来说最好的体验。随着时间的推移,当越来越多的人开始升汲浏览器而浏览器本身的 支持度也不断提升时,就会有越来越多的人体验到这些增强和改进,它持续有效地使网站越来 越好,却无需你刻意做什么。只需要一次实现,它就让网站的体验与时俱进。
    大部分人可能永远都不知道你的网站在不同的浏览器和设备上看起来、并不相同,因为普通人 并不会像我们这群“偏执”的Web设计师一样使用多个浏览器来对比设计的细节差异。即便他 们会使用不同浏览器来访问你的网站,只要这些差异不会影响网站的易用性(如果你处理得当的 话),他们也不会对此有什么特别的想法。说到底,假如有人上班时使用IE 8,回家后使用笔 本上的Chrome,在iPhone上使用Safari,并且在Wii上使用Opera来访问你的网站,我想他终究 会习惯所有这些不同设备上的不同表现。

“让我来打个比方……”
    我是个极喜欢“打比方”的人,不仅是在日常生活中,工作中也如此。我觉得用这种方式为 客户解释技术概念或是证明我所做的可用性改变的重要性确实挺不错。因此,尽管你已经开始使 用渐进增强技术,你还是可以使用以下这些比喻来说服尚存犹疑的客户或老板。
    假设你让亲爱的老公(老婆)下碗面。面被端到桌前时,它已具备了所有能让我们得以称其 为“面”的食材:筋道的面条、鲜美的面汤、适量的盐,甚至还可能有葱花儿什么的。这面尝起 来还不错,符合你的要求。
但你怎么都想不到,隔壁邻居吃的面不仅具备你的所有食材,同时还搭配有榨菜、肉末、炸酱,甚至还煎了一个荷包蛋,这些都不是一碗面所必需的,但它们能让这碗面变得更加美
    这例子用在Web网站上也一样:一个简洁清晰并能兼容IE 6的网站就是一碗普通的面,它 完全能符合访问者的期望,也可以满足他们对内容的需求。IE6用户不会想到Firefox用户竟可 以看到一些用CSS3所实现的更为别致的东西,除非你的网站用旧式浏览器看起来就是乱七八糟的(就像是面里没放盐)一你最好修复这个问题——否则你的用户想不到换个浏览器就会别 有洞天。
    如果你是平素很少吃面的南方人,也可以想象一下一碗颗粒饱满却平淡无味的白米饭与 另一碗光润油亮且色味俱全的扬州炒饭之间的差异。又或者你平时爱看电视,那么一台小型 的传统电视和一部髙清纯平的液晶电视也能产生相同的对比效果——液晶电视的效果显然会悦目很多。想让陈旧设备下的页面看起来也一样其实是很不明智的,要知道IE6可是2001年的产品。
    另外一件很不明智的事情是期望录像机能够播放蓝光碟。这从一开始就不可能,因为录像机 的发明比蓝光早很多年。蓝光碟使用了很多新技术来提髙画质和功能,这远不是录像带所能提供 的。只要你愿意,你依旧可以用录像机来看电影,但是蓝光版本的电影看起来更棒,还提供很多 额外内容。每个人都看到了相同的电影内容,但新技术的驾驭者立即获得了额外的好处,而无需 等到录像机退出历史舞台。
    同样道理,当有人在展示一项CSS3技术的时候去询问其在IE 6上的表现也是毫无意义, 它比CSS3的发明都早出现了好些年。只要用户所获得的内容都是相同的,而且CSS3技术对网站 在IE 6下的表现也毫无损害,那么这项仅有部分人可以享受到的设计理念就值得肯定。

CSS3的好处
    我希望你已经清楚地了解了为什么渐进增强这项通用的开发技术非常好,伹我们还没有开 始讨论CSS3的独特好处。CSS3的优点远远不止于能让页面看起来酷炫异常一尽管这也是不 可忽视的。当你读过本书之后就会知道,CSS3能帮助你创建很多十分炫目的效果,使网站设计锦上添花。
    但其实大部分的CSS3视觉效果是无需依赖CSS3来实现的,你还可以找到很多替代的方法, 比如使用图片、JavaScript或Flash。因此除了 “看起来更酷”之外,还需要有其他的理由来支持我们使用CSS3。
这种原因的确存在——总之,在大多数情况下,使用CSS3不仅可以易于开发和修改页面, 还能减少这个页面的加载时间。与此同时,你还能增加网站的可访问性和可用性,使网站能 够适配更多的设备,甚至还可以优化网站的搜索结果排名。下面更详细地介绍这些好处。
更多关于渐进增强的信息
    关于渐进增强实在是有太多可以说的了,事实上,甚至有一整本专门用来讲述它的书,名 叫 Designing with Progressive Enhancement (www.filamentgroup.com/dwpe) 。 尽管我认为我已经已轻 描述得足够详细了,但你可能还需要更深入地了解什么是渐进增强,以及为何它关乎能否说服 你的团队成员、老板或客户。因此我希望下列这些链接能对你有所帮助。
□The Case for Designing with Progressive Enhancement (渐进增强设计实例),作者是 Todd Parker、Maggie Costello Wachs、Scott Jehl 和 Patty Toland (www.peachpit.com/articles/article. aspx?p=1586457)。
□Progressive Enhancement: What It Is, And How To Use It ?(渐进增强的概念和用法)、作者是 Sam
□Progressive Enhancement: Paving the Way for Future Web Design (渐进增强:未来的 Web 设之路),作者是 Steven Champeon (www.hesketh.com/publications/aiticlcs/progressive-enhancement-paving-the-way-for)。
□ Graceful Degradation Versus Progressive Enhancement (优雅降级和渐进增作者是Christian Heilman (dev.opera.com/articles/view/graceful-degradation-progressive-enhance)。

【相关】
(译)理解“渐进增强(Progressive Enhancement)”
渐进增强、优雅降级

评论:
发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容