仓酷云

标题: 来谈谈：CSS款式表渐进加强的基础观点 [打印本页]

作者: 分手快乐 时间: 2015-1-16 00:04
标题: 来谈谈：CSS款式表渐进加强的基础观点
你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。
原文：UnderstandingProgressiveEnhancement
AaronGustafson
从1994年入手下手，Web开辟社区就敲响了文雅升级（GracefulDegradation）的鼓声。这个观点来自工程天下，其中心理念是给最新最壮大的扫瞄器全套餐式的体验，而给那些不幸还在利用Netscape4的不幸人们只留些残羹残羹般的基础功效。毫无疑问，这发扬了感化。可是它其实不很切合TimBerners-Lee（译注：万维网之父）关于广泛可会见性收集（UniversallyAccessibleWeb）的原始愿景。

约莫10年后，一些伶俐的家伙入手下手质疑文雅升级，发明它在良多层面上有不敷的地方。他们将精神会合在内容可用性（ContentAvailability）、整体可会见性（OverallAccessibility）和挪动设备扫瞄器的才能上，寻觅到了一条Web开辟的新路子——此办法将内容作为存眷核心，而不但是对旧设备的撑持嘴上说说却没有实践举动。
延长浏览相干内容：CSS款式表渐进加强的使用
在2003年的SXSW集会（译注：一个关于影戏、音乐和交互的集会）中，SteveChampeon和NickFinck做了名为“面向将来的全方位Web计划”的演讲。如许，他们展现了这类Web开辟新办法的蓝图。Steve还给它取了个称号：渐进加强（ProgressiveEnhancement）。
这里有个（奇妙的）不同

假如你挠着头想弄分明文雅升级和渐进加强的区分，我告知你，这是视角成绩。文雅升级和渐进加强都思索网站在各类设备的各类扫瞄器上怎样优秀运转。二者区分的关头在于它们各自存眷的核心，和这类存眷对事情流程的影响。
文雅升级的视角

文雅升级存眷于在开始进/最万能的扫瞄器上构建网站。在被以为“老的”或才能不敷的扫瞄器中的测试，常常要比及开辟周期的最初一个环节才举行，而且一般限定在支流扫瞄器（如IE、Mozzila等）的前一个公布版本中。
在这类形式下，老的扫瞄器只大概供应差强者意（poor,butpassable）的体验。也许会做些小补钉来顺应某个特定扫瞄器，但这些扫瞄器究竟不是存眷的核心，除修改严重的毛病，也不会再费多年夜的神了。
渐进加强的视角

渐进加强存眷于内容。请注重区分：我乃至都没说起扫瞄器。
内容是我们最后创立网站的缘故原由。有些网站传布内容，有些搜集内容，有些哀求内容，有些操纵内容，有些网站以上一切功效都有，但是它们都必要内容。这就是渐进增添成为一种更合适的形式的关头地点。这也是Yahoo!敏捷采取这类形式并用它创立了分级扫瞄器撑持（GradedBrowserSupport）战略的缘故原由。
它是如何运作的

进进渐进加强的头脑办法很复杂：只需从内容入手下手往外想。内容构成坚固的基石，在此之上才干增加款式和交互。假如你爱吃糖果，能够将它想像成一颗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来检验你的渐进加强技能，并展现如何把哲学转换成代码。
~~~~~~
译注：

GracefulDegradation有译为预留退路、安稳退步的，但我以为这两个翻译没有表达原意，不如间接翻译成文雅升级的好。
Unobtrusive有译为不冒昧的、分别的、低调的，在Web开辟范畴，我以为翻译成“无侵进的”最能表达原意。

2008年10月08日射雕&安吉译于杭州
2008年10月09日审校
2008年10月14日依据taine的倡议，往失落了译文中很多“你”、“你的”等偶然义词

每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。

作者: 兰色精灵 时间: 2015-1-18 05:03
AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。

作者: 小女巫 时间: 2015-1-21 20:00
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 柔情似水 时间: 2015-1-30 22:17
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 海妖 时间: 2015-2-6 16:31
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 山那边是海 时间: 2015-2-17 08:12
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 活着的死人 时间: 2015-3-12 11:50
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 小魔女 时间: 2015-3-19 22:11
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

欢迎光临仓酷云 (http://ckuyun.com/)