Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Front-End
Code

渐进增强的理论

by
Length:ShortLanguages:
This post is part of a series called The Theory and Practice of Progressive Enhancement.
Building a Website With Progressive Enhancement

Chinese (Simplified) (中文(简体)) translation by Kendra Schaefer (you can also view the original English article)

建立网站时,你有数种方式可以选择。

你可以先使用最先进技术,包括程式码、样式等,然后在较旧的浏览器优雅降级 (graceful degradation)。或者你选择忽略旧浏览器。又或者,你可以先建立基本网页,接着以渐进增强( progressive enhancement)方式加上程式码和样式让网页有更多的功能。

在这个系列中,我们将看看后者是怎么达成的。

首先,我们会讲述渐进增强的背后理论。但不用觉得惧怕,这不是火箭科学,这些规则其实相当简单。


为什么?

你或许会问:为什么我要理旧浏览器?毕竟现在几乎所有的主流浏览器都会自动更新了。

首先而且是最重要的,除非你制作高度互动的网路应用程式,不然你必需考虑失能的使用者。他们可以用萤幕阅读软体,这些装置不会读样式或复杂的介面,因为这会让使用者难以理解到底有什么在页面上。

第二点,现在仍有人关掉 JavaScript 及/或 CSS。原因有很多 - 频宽上限、缓慢地连线、或个人偏好。 有些人也使用文字浏览器,这些浏览器只读取少量的 CSS 并且忽略 JavaScript。

再者,这会让你的程式码容易维护。你会有更富有语意的 HTML。未来维护时可以轻松搞清楚这些标记(markup)、样式和程式码在做什么。

最后,有些地方就是不让使用者安装或更新任何软体,包括浏览器(这在大公司时常发生)。

如果你还是没被说服,有些国家甚至立法要求网路开发者需要让失能者也可以使用他们的网站(例如在英国)。


基本规则

现在让我们回顾使用渐进式增强制作网站的基本规则。

基本内容应该让所有浏览器都可以读取

如果你理解“内容”在这篇文章的涵义,这看来似乎很直觉。

在此“内容”是指你希望使用者所接受到的讯息以其最基本的方式-文字-呈现。标题、注解、连结、段落等类似格式是可接受的,但是图片、音乐、动画不在我们所讨论的“内容”范围内(而且它们应该以alttitle属性适当地描述)。

现在来谈一下“可读取”的概念:不只是所有的浏览器可以呈现你的内容,并且要以可读的方式呈现。换言之,把所有文字放入无格式化的单一段落不是个好主意。

所有浏览器可以执行基本功能

如果你的网页上有锚点或按钮,使用者应该可以使用它们浏览相关内容。这和他们是使用最新版的 Chrome 或是使用旧版的 Internet Explorer 浏览器无关。

语意标记包含所有内容

这需要多点计画,特别是精巧的设计。这规则要求你尽量使用较少的基本 HTML 标签来包装内容。 意思是你无法为了视觉效果巢状堆叠十数个<div>

如果你遵循此项原则,你的 HTML 会较清楚易懂。绚烂的效果就交由 CSS 负责。

藉由外部的 CSS 增进页面布局

首先,忘了 HTML 标签 的 style 属性吧。你必须使用 class、ID 或其他属性,并且由格式表(stylesheet)来定义外观。

<style> 标签 也不可以使用,格式表必须使用 <link> 标签来载入,所以如果浏览器不支援或关掉 CSS,就不会下载相关档案。 标签 也不可以使用,格式表必须使用 标签来载入,所以如果浏览器不支援或关掉 CSS,就不会下载相关档案。 标签 也不可以使用,格式表必须使用 标签来载入,所以如果浏览器不支援或关掉 CSS,就不会下载相关档案。 标签 也不可以使用,格式表必须使用 标签来载入,所以如果浏览器不支援或关掉 CSS,就不会下载相关档案。

增进的行为由非侵入式、外部的 JavaScript 提供

此点和上述观点类似-在 HTML 中没有事件处理器(event handler),内容里没有 <script> 标签,而且在此类档案没有载入时网页仍然可以使用。所以你不能强迫使用者依靠 Javascript 进行像是送出表单的动作。 标签,而且在此类档案没有载入时网页仍然可以使用。所以你不能强迫使用者依靠 Javascript 进行像是送出表单的动作。

尊重终端使用者的浏览器偏好

这有点复杂。或许你想问自己,为什么使用者的浏览器偏好和我的网页有关?

首先这和 CSS 有关。基本上布局应该是响应式的。字体大小应该和使用者的预设值相关(单位使用 em 而不是px)。

另外一部分和 JavaScript 相关:如果使用者关掉它,不要强迫他们改变设定,除非这和网站的核心功能有关。不要以一个大大的红色框说,本网站无法在没有 Javascript 支援下运行,相反的,花时间开发使用没有 Javascript 也可以执行的功能。


设计流程

你的设计流程或许不会有太多改变。你只是需要记得前面那些原则,然后不要制作违反他们的功能。

如果你的设计追随最新标准,应该不会有什么问题。布局应该是简单干净。 所有的效果只是锦上添花,所有的内容在移除 CSS 和 JavaScript 时不会无法读取或了解。

所有只为了效果的 HTML 应该被移除。只有在一定必要时,为了避免阻碍网页或浪费使用者太多频宽,在页面载入时以Javascript 插入所需HTML,(JavaScript 驱动的幻灯片是个完美的例子, 它们在没有样式或程式码时会产生大混乱)。


测试渐进式增强

除了主流的浏览器,测试还需要一些应用程式。

萤幕阅读软体

这会让你以视觉失能者的方式“看”你的网站。有许多应用程式可使用(这里有完整列表。建议使用 ChromeVox,那是Google Chrome 应用程式,而且非常容易使用。

文字浏览器

这不一定是必要的,因为你可以从页面移除所有 CSS 和 JavaScript,但是如果需要独立的应用程式,我会推荐 Lynx

W3C 验证

不是每个人都遵循 HTML 和 CSS 标准,或根据它们来评论工作,不过使用它们可帮助追踪在较新版浏览器无法发现的问题。 一些较新的浏览器在输出内容给使用者时会试着了解并修复不完整的 HTML。你可以在这里验证你的程式码。


结论

本文涵盖渐进式增强的基本理论。现在你应该有使用此策略建立并测试网站所需的能力。

下一篇文章,我们会开始实行理论,制作网页的基本 HTML,并以 CSS 给予样式。

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.