[译] YUI 的浏览器分级支持策略

• Original: Graded Browser Support
• Translated by: cssmagic

译者札记：YUI 停止开发，宣告了一个旧王朝的结束，和一个新时代的到来。尽管如此，YUI 所倡导的“浏览器分级”策略对前端开发领域的影响仍将延续。今日重新翻出这篇文章，别有一番滋味。

About the Browser Test Baseline and Operating Systems

关于浏览器测试基准与操作系统

The Browser Test Baseline provides a baseline set of browsers that should be tested. It is designed to maximize coverage with limited testing resources by testing the smallest possible subset of browser combinations and leveraging implicit coverage from shared core browser engines. At the very least, all listed browsers should be tested in one operating system, in order to provide "baseline" coverage. Testing on multiple operating systems should be accommodated after all browsers have been verified with baseline coverage and should start with features that have known platform-specific issues. The test platforms should be chosen based on usage statistics and market trends.

“浏览器测试基准”规定了哪些浏览器是必测的。它的设计原理在于，努力把测试目标收窄为浏览器（平台与版本）组合的最小子集，同时利用浏览器引擎的共通性扩大实际的测试覆盖面，最终在有限的测试资源下实现测试覆盖率的最大化。最低的限度是，所有目标浏览器都至少需要先在一款操作系统下进行测试，以提供一个“基准”覆盖。多操作系统测试应该在所有浏览器已经经受基准覆盖的检验之后再进行，并且应该将测试重点放在那些已知在特定平台上存在问题的特性上。这个测试平台（操作系统）应该是根据流量统计和市场趋势来选定的。

（译注：在当下更加复杂的浏览器环境下，已经不可能找到一个上文所述的通用测试平台了。不过这无伤大雅，我们仍然可以对每款浏览器在其特定平台上分别测试，以完成基准覆盖。所谓“基准覆盖”，就是测试覆盖面的最底限——土豪项目组尽管去做更多的测试，但屌丝项目组不得少于这个基准的测试覆盖面。因此，虽然浏览器生态今非昔比，这里的“基准覆盖”理论在维护测试成本方面仍具实践意义。）

The Browser Test Baseline defines the current set of browsers that should receive a verified, usable experience. However, trying to deliver the same "A-grade" experience across all tested browsers is neither cost-effective nor common. We support a tiered approach to user experience design, development, and testing, and encourage each project to define their own tiers that serve their users and their testing resources best.

“浏览器测试基准”还规定了当前哪些浏览器应该（在使用网页服务时）获得可靠的、可用的体验。不过，向所有受测浏览器提供同等“A 级”的体验，既不划算，也很难做到。我们推荐以“分层”的方式来进行用户体验的设计、开发和测试，也鼓励每个项目去定义自己的分层标准，以便更好地服务用户、更有效地利用测试资源。

Graded Browser Support: What and Why

浏览器分级支持策略的含义和意义

In the first 10 years of professional web development, back in the early '90s, browser support was binary: Do you -- or don't you -- support a given browser? When the answer was "No", user access to the site was often actively prevented. In the years following IE5's release in 1998, professional web designers and developers have become accustomed to asking at the outset of any new undertaking, "Do I have to support Netscape 4.x browsers for this project?"

在专业的 Web 开发的头十年，也就是九十年代初，浏览器支持策略通常是二元化的——对于某个浏览器，你要么支持，要么不支持。当你选择“不”时，使用这款浏览器的用户往往会被你直接挡在门外。在 IE5 发布（1998 年）之后的几年里，专业的 Web 设计师和工程师在开始一个新项目时，总免不了要问一下自己：“我到底要不要支持网景浏览器 4.x 呢？”

By contrast, in modern web development we must support all browsers. Choosing to exclude a segment of users is inappropriate, and, with a "Graded Browser Support" strategy, unnecessary.

相比之下，在现代 Web 开发中，我们必须支持所有浏览器。把一部分用户挡在门外是不合适的；而且，如果有了“浏览器分级支持”策略，你也用不着这样做。

Graded Browser Support offers two fundamental ideas:

浏览器分级支持策略包含两个基本理念：

• A broader and more reasonable definition of "support."

• The notion of "grades" of support.

• 对“支持”的更广泛、也更合理的定义

• “分级”支持的概念

What Does "Support" Mean?

到底什么叫“支持”？

Support does not mean that everybody gets the same thing. Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web. In fact, requiring the same experience for all users creates an artificial barrier to participation. Availability and accessibility of content should be our key priority.

“支持”不表示所有人得到同样的结果。期望两个使用不同浏览器的用户得到完全一致的体验，这实际上违背了（或者说否认了）Web 多样性的本质。要求向所有用户提供相同的体验，这恰恰成为一道人为的壁垒，阻碍了用户的参与。内容的可用性和可访问性才是我们的首要目标。

Consider television. At the core: TV distributes information. A hand-cranked emergency radio is capable of receiving television audio transmissions. It would be counter-productive to prevent access to this content, even though it's a fringe experience.

来看看电视这个例子。从本质上说，电视是用来传播信息的。一台手摇发电式应急收音机具备接收电视音频信号的能力。如果因为它的体验不够完整，就禁止它获取信息，这显然背离了电视技术的初衷。

Some viewers still have black-and-white televisions. Broadcasting only in black-and-white -- the "lowest common denominator" approach -- ensures a shared experience but benefits no one. Excluding the black-and-white television owners -- the "you must be this tall to ride" approach -- provides no benefit either.

现在仍有些电视观众在使用黑白电视机。只广播黑白电视信息（即“最低共同标准”方案）确实保证了一致的体验，但并没有人从中受益。而把黑白电视机的用户挡在门外（即“穷鬼死开”方案）同样也没有提供益处。

An appropriate support strategy allows every user to consume as much visual and interactive richness as their environment can support. This approach--commonly referred to as progressive enhancement -- builds a rich experience on top of an accessible core, without compromising that core.

正确的支持策略是允许每个电视观众都可以享受到他们的设备所能提供的最好的视觉和互动体验。这种方法——通常被称为“渐进增强”——是在“可访问”这个前提之上建立丰富的体验，但不会为了体验而牺牲这个前提。

Progressive Enhancement vs. Graceful Degradation

渐进增强 vs 优雅降级

（译注：后者也译作“平稳退化”。）

The concepts of graceful degradation and progressive enhancement are often applied to describe browser support strategies. Indeed, they are closely related approaches to the engineering of "fault tolerance".

渐进增强 和 优雅降级 的概念通常用来描述浏览器支持策略。它们确实是“容错”工程中联系紧密的两种方式。

These two concepts influence decision-making about browser support. Because they reflect different priorities, they frame the support discussion differently. Graceful degradation prioritizes presentation, and permits less widely-used browsers to receive less (and give less to the user). Progressive enhancement puts content at the center, and allows most browsers to receive more (and show more to the user). While close in meaning, progressive enhancement is a healthier and more forward-looking approach. Progressive enhancement is a core concept of Graded Browser Support.

这两个概念影响着我们对浏览器支持的决策。它们反映了不同的优先顺序，因此引导着不同的讨论方向。优雅降级侧重于 表现，允许更少使用的浏览器接收更少的内容（浏览器传达给用户的也更少）。而渐进增强是把 内容 放在首位，允许大多数浏览器接收更多内容（浏览器向用户展示的也更多）。意思很接近，但渐进增强的方式更健康，而且更具前瞻性。因此，渐进增强是浏览器分级支持策略的核心概念。

What are Grades of Support?

什么叫“支持级别”？

While an inclusive definition of browser support is necessary, the support continuum does present design, development, and testing challenges. If anything goes, how do I know when the experience is broken? To address this question and return a sense of order to the system, we define grades of support. There are three grades: A-grade, C-grade, and X-grade support.

浏览器支持策略需要有一个完整的定义，支持策略的连续统一性确实对设计、开发和测试带来了挑战。一旦有任何事情变化，我如何判断产品体验是否会受到影响？为了解决这个问题，并让测试系统更具条理性，我们定义了支持的“级别”。一共有三个级别：A 级支持、C 级支持和 X 级支持。

Before examining each grade, here are some characteristics useful for defining levels of support.

在具体探究这三个级别之前，我们先来看对描述支持程度很有帮助的几个特征点。

Identified vs. Unknown
There are over 10,000 browser brands, versions, and configurations and that number is growing. It is possible to group known browsers together.

已知的 vs 未知的
市面上有超过一万种浏览器的品牌、版本和配置组合，并且这个数字还在增长。但把已知的浏览器划分出来还是可以的。

Capable vs. Incapable
No two browsers have an identical implementation. However, it is possible to group browsers according to their support for most web standards.

有能力的 vs 能力不足的
没有两个浏览器具有完全一致的功能实现。不过，如果要根据浏览器对主流 Web 标准的支持情况来把它们分组，还是可以做到的。

Modern vs. Antiquated
As newer browser versions are released, the relevancy of earlier versions decreases.

现代的 vs 过时的
当浏览器的新版本发布时，旧版本的重要程度会降低。

Common vs. Rare
There are thousands of browsers in use, but only a few dozen are widely used.

常见的 vs 不常见的
市面上有数千种浏览器，但其中只有几十种是比较流行的。

Three Grades of Support

三个支持级别

C-grade

C 级

C-grade is the base level of support, providing core content and functionality. It is sometimes called core support. Delivered via nothing more than semantic HTML, the content and experience is highly accessible, unenhanced by decoration or advanced functionality, and forward and backward compatible. Layers of style and behavior are omitted.

C 级是最基本的支持程度，只提供核心内容和功能。它有时也被称作“基础支持”。内容和体验的载体无非就是语义化的 HTML，虽然没有视觉装饰或高级功能作为增强，但它是高度可访问的，且具备向前和向后的兼容性。样式层和行为层将被忽略。

C-grade browsers should be identified on a blacklist.

C 级浏览器应该被明确标记在一份黑名单上。

Summary: C-grade browsers are identified, incapable, antiquated and rare. QA tests a sampling of C-grade browsers, and bugs are addressed with high priority.

总结：C 级浏览器是已知的、能力不足的、过时的和不常见的。QA 会抽样测试 C 级浏览器，并会把 bug 标记为高优先级。

A-grade

A 级

A-grade support is the highest support level. By taking full advantage of the powerful capabilities of modern web standards, the A-grade experience provides advanced functionality and visual fidelity.

A 级表示最高的支持程度。充分利用现代 Web 标准的强大能力，A 级体验会提供先进的产品功能和完整的视觉效果。

A-grade browsers should be identified on a whitelist. Approximately 96% of our audience enjoys an A-grade experience.

A 级浏览器应该被明确标记在一份白名单上。大约 96% 的用户会享受到 A 级体验。

Summary: A-grade browsers are identified, capable, modern and common. QA tests all A-grade browsers, and bugs are addressed with high priority.

总结：A 级浏览器是已知的、有能力的、现代的和常见的。QA 会测试所有 C 级浏览器，并会把 bug 标记为高优先级。

（译注：YUI 目标环境一览表 中所列的各浏览器及具体版本就是 YUI 的“浏览器测试基准”中所规定的“A 级浏览器”……IE6 还在里面呢。）

X-grade

X 级

X-grade provides support for unknown, fringe or rare browsers as well as browsers on which development has ceased. Browsers receiving X-grade support are assumed to be capable. (If a browser is shown to be incapable -- if it chokes on modern methodologies and its user would be better served without decoration or functionality -- then it should considered a C-grade browser.)

X 级支持主要面向那些未知的、非主流的或冷僻的浏览器，也包括那些已经停止开发的浏览器。被判为 X 级的浏览器被假定为有能力的。（如果某个浏览器表现为能力不足——比如它搞不定一些现代技术，而且其用户在缺少装饰和功能的情况下反而更舒服——那么它应该被视为 C 级浏览器。）

X-grade browsers are all browsers not designated as any other grade.

X 级浏览器就是那些没有被划为其它两类的浏览器。

Summary: X-grade browsers are assumed to be capable and modern. QA does not test, and bugs are not opened against X-grade browsers.

总结：我们假设 X 级浏览器是有能力的、现代的。QA 不会去测试 X 级浏览器，也不会记录在它们身上遇到的 bug。

The Relationship Between A-grade and X-grade Support

A 级和 X 级之间的关系

A bit more on the relationship between A-grade and X-grade browsers: One unexpected instance of X-grade is a newly released version of an A-grade browser. Since thorough QA testing is an A-grade requirement, a brand-new (and therefore untested) browser does not qualify as an A-grade browser. This example highlights a strength of the Graded Browser Support approach. The only practical difference between A-grade and X-grade browsers is that QA actively tests against A-grade browsers.

我们来进一步阐述 A 级和 X 级浏览器之间的关系：一个突然出现的 X 级浏览器很可能就是某个 A 级浏览器刚刚发布的一个新版本。由于 A 级浏览器必须进行全面的 QA 测试，那么一个刚出炉的（当然也是未测过的）浏览器还不具备 A 级浏览器的资格。这个例子凸显了浏览器分级支持策略的优势。A 级浏览器和 X 级浏览器之间仅有的实质性区别就是 QA 只对前者做积极全面的测试。

（译注：所谓“优势”，说白了还是这种主次分明的成本意识。）

Unlike the C-grade, which receives only HTML, the X-grade receives everything that A-grade does. Though a brand-new browser might be characterized initially as a X-grade browser, we give its users every chance to have the same experience as A-grade browsers.

不像 C 级浏览器只会收到 HTML，X 级浏览器会收到 A 级浏览器会收到的所有东西。虽然一款刚出炉的浏览器刚开始可能会被定位为 X 级浏览器，但我们会尽可能让它的用户享受到与 A 级浏览器同等的体验。

Beyond the Three Grades

更复杂的分级

In recent years, we have seen a proliferation in tiers of support above and beyond the three grades identified above, where certain subsets of features are implemented only on certain subsets of browsers. Defining and implementing tiers of user experience should be done by each individual project. Overall, we promote the simplest Progressive Enhancement approach possible and discourage projects from creating new tiers without accounting for the additional costs in development, testing, and maintenance resources.

近年来，我们看到，在上述三个级别的基础之上，分层支持策略产生了复杂化的倾向——这也归咎于各种浏览器对各种功能的实现情况越发复杂化。诚然，定义和执行用户体验层级确实应该因项目而异；但总的来说，我们认为“三个级别”方案最有利于渐进增强的实现，而且，我们不建议任何项目在不考虑开发、测试、维护等方面的额外成本的情况下发明更复杂的分层策略。

Quality Assurance (QA) Testing

质量保证（QA）测试

Grading the browser ecosystem enables meaningful, targeted, and cost-effective QA testing. As noted, representative C-grade testing and systematic A-grade testing ensures a usable and verified experience for the vast majority of our audience. A-grade testing must be thorough and complete, while C-grade testing can be accomplished with one or two representative browsers (e.g., Netscape 4.x and Lynx), or by using a modern browser with CSS and JavaScript disabled.

对浏览器生态系统进行分级，将使 QA 测试更加有意义、有目标，且成本效率更高。如上所述，抽样型的 C 级测试和系统型的 A 级测试可以确保我们的绝大部分用户获得可用、可靠的产品体验。A 级测试必须是全面和完整的，而 C 级测试可以只在一到两款有代表性的浏览器上完成（比如网景浏览器 4.x 或 Lynx），或者用一款禁用了 CSS 和 JavaScript 的现代浏览器来模拟。

It's worth reiterating that testing resources do not examine X-grade browsers.

这里有必要再次强调，测试团队 不需要 测试 X 级浏览器。

Representative testing of the core experience is critical. If you choose to adopt a Graded Browser Support approach for your own projects, be sure your site's core content and functionality are accessible without images, CSS, and JS. Ensure that the keyboard is adequate for task completion and that when your site is accessed by a C-grade browser all advanced functionality prompts are hidden.

针对基础体验的抽样测试是至关重要的。如果你决定在你自己的项目中采用浏览器分级支持策略，请确保你的网站的核心内容和功能在缺少图片、CSS 和 JS 时仍然是可访问的；请确保键盘操作也可以完成任务；请确保 C 级浏览器在访问你的网站时，所有高级功能的提示都已经隐藏掉了。

Conclusion

总结

Graded Browser Support provides an inclusive definition of support and a framework for taming the ever-expanding world of browsers and frontend technologies.

浏览器分级支持策略提供了一套关于“支持”的完整定义，这个框架将帮助你从容面对蓬勃发展的浏览器生态和日新月异的前端技术。

Tim Berners-Lee, inventor of the World Wide Web and director of the W3C, has said it best:

这里引用万维网发明人、W3C 主席 蒂姆·伯纳斯-李 的话再合适不过：

"Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network."

如果有人在网页上贴出“本页在某浏览器下效果最好”这样的标签，他看起来就像是在怀念以前的苦日子——就像在 Web 出现之前，那时我们几乎无法读到在其它电脑/其它软件/其它网络上写的文档。

© Creative Commons BY-NC-ND 4.0   |   我要订阅   |   我要打赏