渐进增强和优雅降级有什么区别?

发布于 2024-08-26 20:08:18 字数 118 浏览 8 评论 0原文

我对渐进增强优雅降级之间的区别感到困惑。对我来说,它们似乎是同一件事。

您能否向我解释一下两者之间的区别以及在哪种情况下我会使用其中一种?

I'm confused on what the difference is between progressive enhancement and graceful degradation. To me they seem like the same thing.

Can you please explain to me the differences between the two and in which situation I would use one over the other?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

那片花海 2024-09-02 20:08:18

它们几乎完全相同,但上下文不同。

有一种浏览器称为“A 级浏览器”。这些是您的典型受众成员,(可能)构成您的访问者的大多数。您将从这些用户的基线开始。将此称为最佳现代实践

如果您想增强任何碰巧使用 Firefox 3.6 或 Safari 4 或其他一些whizbang 开发者 nightly WebKit 的人的体验,您会想要做一些很棒的事情,比如

  • 实现圆角
  • 通过 CSS阴影文本 (但请上帝,不要太多
  • 阴影(见上面的括号)

这些使您的网站看起来很漂亮,但不会破坏它。这就是渐进增强。从最佳实践的角度拥抱未来。

另一方面,您的任天堂小众网站吸引了相当多的 Internet Explorer 5 用户。可怜的你,但你也想确保他们不断回来。您可以通过将 Ajax 脚本包含在外部文件中来提供 Ajax 行为的替代方案,如果未打开 JavaScript,您的链接可能会更新整个页面。等等。从最佳现代实践的角度来看,您要确保某种功能性网站的外观能够满足某些历史市场的需求。这是优雅降级

它们大部分是相同的,但对于许多开发团队来说,它们的优先级不同:如果有时间,渐进增强非常好,但优雅的降级通常是必要的

They are almost exactly the same thing, but they differ in context.

There is a class of browsers called "A Grade Browsers". These are your typical audience members that (probably) make up the majority of your visitors. You'll start with a baseline of these users. Call this best modern practices.

If you want to enhance the experience for anyone happening to use Firefox 3.6 or Safari 4 or some other whizbang developer nightly WebKit what have you, you'll want to do awesome things like

  • rounded corners via CSS
  • shadowed text (but please god, not too much)
  • drop shadows (see above parenthetical)

These make your site kick-ass looking, but won't break it. This is progressive enhancement. Embracing the future from the point of best practices.

On the other hand, your niche Nintendo site attracts a fair number of Internet Explorer 5 users. Poor you, but you also want to make sure they keep coming back. You might provide an alternative to your Ajax behavior by including the Ajax script in an external file and if their JavaScript isn't turned on, maybe your links update the whole page. Etc. From the point of view of best modern practices, you're making sure that certain historical markets are being catered by some semblance of a functional site. This is graceful degradation.

They are mostly identical, but they differ in terms of priority for many development teams: progressive enhancement is quite nice if you have the time, but graceful degradation is often necessary.

预谋 2024-09-02 20:08:18

如果您的网站在所有浏览器上看起来都一样好,但某些浏览器因为支持跳舞小马而获得跳舞小马,那么这就是渐进增强。它适用于所有浏览器,但某些浏览器会提供额外的功能。通常该术语应用于某些 JavaScript 功能,这些功能可能会增强“原始 HTML”之外的可用性。

如果您的网站仅在完全支持 CSS 3 和 Internet Explorer 8 等浏览器上按照您想要的方式显示,并且不会显示圆角等相同页面,那么这就是优雅降级。该网站确实适用于最先进的浏览器,但它仍然可以在较旧的浏览器中使用,只是不那么花哨。

最后,它们实际上是同一件事,只是从两个不同的角度来看。

If your site looks equally good on all browsers, but certain browsers get, say, dancing ponies because they support dancing ponies, then that's progressive enhancement. It works in all browsers, but certain browsers get something extra. Usually that term is applied to certain JavaScript features that may enhance usability beyond "raw HTML".

If your site only looks the way you intend to on browsers that fully support, say, CSS 3, and Internet Explorer 8- will display the same page without, say, rounded corners, then that's graceful degradation. The site is really meant for state-of-the-art browsers, but it's still usable in older browsers, just not as fancy.

In the end, they're really the same thing, looked at from two different perspectives.

最偏执的依靠 2024-09-02 20:08:18

每个概念从选定的基线开始的方向是不同的。

优雅降级从理想的用户体验级别开始,然后根据用户代理功能降低到最低级别,以满足不支持基线使用的某些功能的代理。

渐进增强从广泛的最低用户体验开始,并根据用户代理的能力增加到更强大的水平,以满足支持比基线更高级功能的代理。

我认为如果时间/预算允许,可以采用这两种概念。如果不是,则首选优雅降级。

The direction from a chosen baseline for each concept is different.

Graceful degradation starts at an ideal user experience level and decreases depending on user agent capabilities down to a minimum level, catering for agents that don't support certain features used by the baseline.

Progressive enhancement starts at a broad minimum user experience and increases depending on user agent capabilities up to a more capable level, catering for agents that support more advanced features than the baseline.

I think that one could employ both concepts if time/budget permit. If not then graceful degradation would be preferred.

温折酒 2024-09-02 20:08:18

尽管我在某种程度上同意 Alex Mcp 和 deceze 的观点,但“优雅降级”和“渐进增强”这两个术语的含义与我的立场略有不同。

根据我的经验,在很多时候(在我看来),优雅降级似乎更像是在应用程序最初构建得很糟糕之后将其击败的棍子。就像有人构建了一些巨大的 JavaScript 对象,为用户提供了一些非常酷的东西来玩,直到经理出现,测试了这个东西,当他们注意到他们的应用程序无法工作时,每个人都尖叫着张开双臂。在 35% 的浏览器中。 “最好有人为此提供后备方案。”

渐进增强(这也是一个更好的术语)在我看来更多地关注通过最基本的可用方法,在入门级、任何地方构建可以正常工作的东西,以提供用户需要的所有功能。然后可以添加一些简洁的、不显眼的助手、样式等,这些实际上增强了相关应用程序的用户体验,而不仅仅是使其几乎无法使用。 “看起来很酷。它在 Internet Explorer 6 中工作吗? ?哦,是的。”

我认为,也许将样式作为前两个答案中的两个术语的示例,有点忽略了真正的潜在可用性问题:渐进增强通常可以通过其本质来解决问题,而“优雅降级”会忽略问题,直到出现问题。

咆哮...

Although I agree with both Alex Mcp and deceze in a way, the terms "graceful degradation" and "progressive enhancement" have slightly different meanings from where I stand.

Graceful degradation, a lot of the time (in my opinion), seems to be more of a stick to beat an application into submission after it's been built badly in the first place in my experience. Like someone building out some vast JavaScript object that provides the user with something really cool to play with, until a manager comes along, tests the thing and everyone runs screaming throwing their arms around when it comes to their attention that their application doesn't work in 35% of browsers. "Someone better provide a fallback for this."

Progressive enhancement though (and it's such a nicer term to say too) would seem to me to be more about building something that just works, on an entry level, everywhere, through the most basic methods available, to provide all the functionality that the user needs. This can then be added to with neat little unobtrusive helpers, styling, etc. that actually enhance the user experience of the application in question, rather than just make it barely usable. "That looks cool. Does it work in Internet Explorer 6? Oh yeah. It does."

I think maybe giving style as an example of both terms in the top two answers here kind of overlooks the real underlying usability issue that progressive enhancement often solves by its very nature, where graceful degradation ignores until things go wrong.

Rant over...

看轻我的陪伴 2024-09-02 20:08:18

优雅降级

优雅降级是计算机、机器、电子设备的能力
即使系统或网络很大,也能维持有限的功能
其部分已被毁坏或无法使用。目的
优雅降级的目的是为了防止灾难性故障。

优雅降级是一种解决方案。这是构建网站或应用程序的实践,因此它可以在现代浏览器中提供良好的用户体验。然而,对于那些使用旧版浏览器的人来说,它会优雅地降级。该系统可能不那么令人愉快或漂亮,但基本功能可以在旧系统上运行。

一个简单的例子是使用 24 位 alpha 透明 PNG 图像。这些图像可以毫无问题地显示在现代浏览器上。 Internet Explorer 5.5 和 Internet Explorer 6 将显示图像,但透明效果将失败(如果需要,可以使其工作)。不支持 PNG 的旧版浏览器会显示替代文本或空白区域。

采用优雅降级的开发人员通常会指定其浏览器支持级别,例如1级浏览器(最佳体验)和2级浏览器(降级体验)。

渐进增强

渐进增强是一种网页设计策略,强调
可访问性、语义 HTML 标记和外部样式表以及
脚本技术。渐进增强使用网络技术
以分层方式允许每个人访问基本内容
使用任何浏览器或互联网的网页和功能
连接,同时还提供增强版的页面
那些拥有更先进的浏览器软件或更大带宽的人。

渐进增强与优雅降级的概念类似,但方向相反。网站或应用程序将为大多数浏览器建立基本的用户体验。当浏览器支持时,将添加更高级的功能。

渐进增强不需要我们选择支持的浏览器或恢复到基于表格的布局。我们选择技术水平;即浏览器必须支持 HTML 4.01 和标准页面请求/响应。

回到我们的图像示例,我们可能会决定我们的应用程序应该在所有图形浏览器中运行。我们可以默认使用质量较低的 GIF 图像,但当浏览器支持时将其替换为 24 位 PNG。


链接

维基百科:渐进增强优雅降级(容错)

来源:SitePoint 博客

Graceful degradation

Graceful degradation is the ability of a computer, machine, electronic
system or network to maintain limited functionality even when a large
portion of it has been destroyed or rendered inoperative. The purpose
of graceful degradation is to prevent catastrophic failure.

Graceful degradation is one solution. It is the practice of building a web site or application so it provides a good level of user experience in modern browsers. However, it will degrade gracefully for those using older browsers. The system may not be as pleasant or as pretty, but the basic functionality will work on older systems.

A simple example is the use of 24-bit alpha-transparent PNG images. Those images can be displayed on modern browsers without problems. Internet Explorer 5.5 and Internet Explorer 6 would show the image, but transparency effects would fail (it can be made to work if necessary). Older browsers that do not support PNG would show alt text or an empty space.

Developers adopting graceful degradation often specify their browser support level, e.g. level 1 browsers (best experience) and level 2 browsers (degraded experience).

Progressive enhancement

Progressive enhancement is a strategy for web design that emphasizes
accessibility, semantic HTML markup, and external stylesheet and
scripting technologies. Progressive enhancement uses web technologies
in a layered fashion that allows everyone to access the basic content
and functionality of a web page, using any browser or Internet
connection, while also providing an enhanced version of the page to
those with more advanced browser software or greater bandwidth.

Progressive enhancement is similar concept to graceful degradation but in reverse. The web site or application would establish a base-level of user experience for most browsers. More advanced functionality would then be added when a browser supports it.

Progressive enhancement does not require us to select supported browsers or revert to table-based layouts. We choose a level of technology; i.e. the browser must support HTML 4.01 and standard page request/responses.

Going back to our image example, we might decide that our application should be functional in all graphical browsers. We could use a lower-quality GIF images by default but replace them with 24-bit PNGs when the browser supports them.


Links

Wikipedia: Progressive enhancement and Graceful degradation (fault tolerance)

Source: SitePoint Blog

不知在何时 2024-09-02 20:08:18

I find it tends to be attitudinal - are you saying "okay, my site works with Lynx, users can do everything I want them to be able to do, now let’s add some panache", or are you saying "okay, my site works in Firefox, now let’s try to fix it for people not willing to use that/who turn off JavaScript/etc."

百合的盛世恋 2024-09-02 20:08:18

为了更容易,只需将栏设置在顶部,然后您就可以忽略渐进增强。当新功能出现时,提高您的标准;)

或者,将您的标准设置为最低级别 (Lynx 也许?)并且只使用渐进增强。

To make it easier, just set your bar right at the top, and then you can ignore progressive enhancement. When a new feature comes out, raise your bar ;)

Or alternatively, set your bar to the lowest level (Lynx perhaps?) and just use progressive enhancement.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文