面向未来的全方位Web设计:渐进增强(2)

http://www.itjxue.com  2015-08-07 22:20  来源:未知  点击次数: 

它是怎样运作的

进入渐进增强的思维方法很简单:只要从内容开始往外想。内容形成坚实的基石,在此之上你才能添加样式和交互。如果你爱吃糖果,可以将它想像成一颗M&M花生巧克力:

(图示:渐进增强的巧克力层)

从你的内容花生开始,将其标记为富含语义的(X)HTML. 接着给内容裹上一层富含奶油的CSS. 最后,添加JavaScript作为糖果硬壳,这就做成了一颗可口无比的美味(并使得它不会在你手里融化)。

如果你非常熟悉Web标准化运动的口号——分离、分离、分离——这个类比就相当清楚了。基于Web标准的开发经常被比作 夹心蛋糕(或者,可以更富想像力地比作为 松糕(译注:一种多层蛋糕,可以夹水果、奶油、沙司等))。

我更倾向拿M&M花生巧克力来类比,因为它的外层把内容完全包裹住了,这和我们的样式与脚本将内容包裹起来几乎是一样的。

如果你允许我的食物类比论再多讲一点(希望不会让你感觉饥饿),我将解释为什么这种方式更好以及在这种模式下各层之间是如何交互的。

花生仁

有些人喜欢花生。实际上,有人喜欢花生胜过M&M花生巧克力。类似地,有些家伙(以及像搜索引擎爬虫这类东西)只想要内容。

还有些人无福消受花生上的巧克力和糖果层(例如糖尿病患者)。和他们类似,移动设备或老浏览器用户可能无法看到你漂亮的设计,或者与你流畅的AJAX驱动的界面交互。

确保你的标记能够将所包裹的内容的细节最大限度地传达出来,这对于给这些用户提供基本体验至关重要。

巧克力外衣

接下来,你可以将内容小心地浸入芳香美味的CSS暖浴中了。不过在你跳进糖果硬壳之前,还有些额外的考虑。

有的人爱吃巧克力裹着的花生。这些人就像中级用户,他们的浏览器有比较好的CSS支持,但可能没有很好的JavaScript支持。或者,可能在他们工作的公司里,IT安全人员对JavaScript极其病态性地恐惧。对他们来说,JavaScript就可能完全被禁用了。

无论是倾向于爱吃 巧克力花生(译注:一种直接用巧克力覆盖的花生,没有外层硬壳,类似于有内容和CSS但没有JavaScript支持的网站)还是被限制只能吃 巧克力花生,这些人都应该得到满足。这里有几种渐进增强的方式可以将样式应用于内容,这将是本系列第二篇文章的话题。

糖果硬壳

最后,你可以将JavaScript添加到内容和样式的混合体中了。JavaScript提供了富交互的可能性,同时具有操作内容层和展现层并与其交互的能力,这实际上使得JavaScript成为了把网站带入“体验”高度的一味配料。

我不确定糖果硬壳到底是怎样添加到M&M花生巧克力上的(我猜是另一种什么浸蘸过程吧),但是,你脑中想着渐进增强的话,在你的网站上加入基于JavaScript的功能和交互就轻而易举了。另外,就如M&M花生巧克力有各种各样颜色一样,依据所运行的浏览器和设备的能力,JavaScript的体验也可以各不相同。

正如你可能知道的那样,这种类型的开发叫做无侵入式(Unobtrusive)JavaScript. 我将在本系列的第三篇和最后一篇文章中讲述这些技巧和实践。

都放在一起

一旦理解了渐进增强的理念并开始在实践中使用,那么用渐进增强进行开发就非常简单了。也许比做糖果还简单。本系列接下来的两篇文章将帮助你使用CSS和JavaScript来磨练你的渐进增强技巧,并向你展示怎样把哲学转换成代码。

译注

  1. Graceful Degradation有译为预留退路、平稳退化的,但我觉得这两个翻译没有表达原意,不如直接翻译成优雅降级的好。
  2. Unobtrusive有译为不唐突的、分离的、低调的,在Web开发领域,我觉得翻译成“无侵入的”最能表达原意。

2008年10月8日 射雕&安吉 译于杭州
2008年10月9日 审校

(责任编辑:IT教学网)

更多