您的位置: 首页 > 技术文档 > 网页制作 > 理解"渐进增强"
form的submit方法和submit事件 回到列表 Css Reset(复位)整理
 理解"渐进增强"

作者:lifesinger 时间: 2008-10-13 文档类型:翻译 来自:岁月如歌

第 1 页 理解"渐进增强" [1]
第 2 页 理解"渐进增强" [2]

它是怎样运作的

进入渐进增强的思维方法很简单:只要从内容开始往外想。内容形成坚实的基石,在此之上你才能添加样式和交互。如果你爱吃糖果,可以将它想像成一颗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日 审校

本文链接:http://www.blueidea.com/tech/web/2008/6226.asp 

出处:岁月如歌
责任编辑:moby

上一页 理解"渐进增强" [1] 下一页

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
Css Reset(复位)整理
10条影响CSS渲染速度的写法与建议
精通JavaScript+jQuery
CSS 浏览器的等宽空格
跨浏览器实现float:center
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:2/21个记录/页 转到 页 共2个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2