岁月如歌

原文：Progressive Enhancement with JavaScript
作者： Aaron Gustafson
翻译：射雕 & 安吉

如果你阅读了本系列的第一篇和第二篇文章，现在应当开始进入渐进增强的思维模式了。本文讨论如何将渐进增强的哲学应用到客户端脚本。你将很快看到，这涉及两个方面：约束与规划 阅读全文 »

原文：Progressive Enhancement with CSS
作者： Aaron Gustafson
翻译：lifesinger

本系列上一篇涵盖了渐进增强的基本概念，现在我们来讨论如何应用。有多种方式可以将渐进增强融入到层叠样式表（Cascading Style Sheets, 简称CSS）的工作中，本文将讨论其中比较成功的一些，并考虑采用其它方式来逐步增强你的站点 阅读全文 »

上篇中讨论了各种已有的布局实现。仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用：

• 浮动 float
• 负边距 negative margin
• 相对定位 relative position

这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案 阅读全文 »

来看一个经典的三栏布局：

从内容出发（渐进增强的核心思想），一份合理的HTML结构如下：

<div id="page">
    <div id="hd"></div>
    <div id="bd">
        <div class="main"></div>
        <div class="sub"></div>
        <div class="extra"></div>
    </div>
   <div id="ft"></div>
</div>

main是主要内容，sub是辅助内容，比如导航、相关文章等，extra是额外信息，比如广告等，具体含义根据实际情况来定。书写HTML文档有个非常重要的原则是：重要的内容放前面。这能让文档更富语义，能提高可访问性，对SEO也更友善。

写好上面的代码后，我们来看看如何实现三栏布局 阅读全文 »

原文：Understanding Progressive Enhancement
作者：Aaron Gustafson
翻译：http://lifesinger.org/

从1994年开始，Web开发社区就敲响了优雅降级（Graceful Degradation）的鼓声。这个概念来自工程世界，其核心理念是给最新最强大的浏览器全套餐式的体验，而给那些不幸还在使用Netscape 4的可怜人们只留些残羹冷炙般的基本功能。毫无疑问，这发挥了作用。但是它并不很符合Tim Berners-Lee（译注：万维网之父）关于普遍可访问性网络（Universally Accessible Web）的原始愿景。

大约10年后，一些聪明的家伙开始质疑优雅降级，发现它在很多层面上有不足之处。他们将精力集中在内容可用性（Content Availability）、总体可访问性（Overall Accessibility）和移动设备浏览器的能力上，寻找到了一条Web开发的新途径——此方法将内容作为关注焦点，而不只是对旧设备的支持嘴上说说却没有实际行动。

在2003年的SXSW会议（译注：一个关于电影、音乐和交互的会议）中，Steve Champeon和Nick Finck做了名为 “面向未来的全方位Web设计” 的演讲。这样，他们揭示了这种Web开发新方法的蓝图。Steve还给它取了个名称：渐进增强（Progressive Enhancement）。

这里有个（微妙的）差别

如果你挠着头想弄清楚优雅降级和渐进增强的区别，我告诉你，这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点，以及这种关注对工作流程的影响 阅读全文 »