Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css] 第9天 简述下你理解的优雅降级和渐进增强 #26

Open
haizhilin2013 opened this issue Apr 24, 2019 · 18 comments
Open
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第9天 简述下你理解的优雅降级和渐进增强

@haizhilin2013 haizhilin2013 added the css css label Apr 24, 2019
@tiyunchen
Copy link

https://segmentfault.com/a/1190000013818745

现在项目没有考虑过这个问题,都是一套css

@poporeki
Copy link

poporeki commented Jul 4, 2019

优雅降级,先做好一个完善的具备完整体验的版本,再向下做兼容。
渐进增强,先做好一个可以基本正常使用的版本,再慢慢丰富体验和内容。

@Konata9
Copy link

Konata9 commented Jul 24, 2019

总结了一下前面老哥的回答。

渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用 CSS3,而在低级浏览器只保证最基本的功能。

优雅降级

先不考虑兼容,优先最新版本浏览器效果,之后再逐渐兼容低版本浏览器。

渐进增强

考虑兼容,以较低(多)浏览器效果为主,之后再逐渐增加对新版本浏览器的支持,以内容为主。也是多数公司所采用的方法。

参考文章:前端面试题-渐进增强和优雅降级

@yyz841875845
Copy link

只用最新chrome ,完结。

@PullAndRun
Copy link

优雅不起来。引导用户下载chrome。
猴子猩猩原始人才用IE

@linzowo
Copy link

linzowo commented Mar 23, 2020

我个人的观点是。不管是哪种都需要先有一个结实的基本html框架才行。字面上说优雅降级和渐进增强都是先开发一个最高或最低版本,然后按需增加适应。但是如果在前期没有搭好一个健壮的框架,那后面有一些功能实现上,难免可能会修改html结构,这就导致前面写好的内容可能要被推翻重做。

@blueRoach
Copy link

优雅降级:在编写项目时,直接针对最高级、最稳定的版本进行开发。然后在后续对低版本进行兼容。
渐进增强:在编写项目时,针对自己想个兼容的最低版本进行开发。然后在后续对高版本的新特性开发,或者更好的体验

@giggleCYT
Copy link

渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

在传统软件开发中,经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容,而优雅降级相当于向下兼容

@MrZ2019
Copy link

MrZ2019 commented Sep 3, 2020

优雅降级
先不考虑兼容,优先最新版本浏览器效果,之后再逐渐兼容低版本浏览器。

渐进增强
考虑兼容,以较低(多)浏览器效果为主,之后再逐渐增加对新版本浏览器的支持,以内容为主。也是多数公司所采用的方法。

@GodEnd
Copy link

GodEnd commented Mar 21, 2021

优雅降级是先写一套兼容最新的浏览器的方案,再向之前的浏览器做兼容。
渐进增强是先从之前低级的版本的浏览器做一套功能最简单的方案,再逐步向上兼容,增强功能。

@pangyutong
Copy link

Math.floor Math.ceil
你品 你细品

@xiezhenghua123
Copy link

优雅降级:先考虑最新浏览器,然后再向下考虑兼容的问题
线性增强:先考虑最坏的兼容情况,然后添加新浏览器特性

@amikly
Copy link

amikly commented Oct 27, 2021

优雅降级(graceful degradation)

一开始就构建站点的完整功能,然后再针对低版本浏览器进行兼容

比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览

优雅降级的写法,优先考虑新版本浏览器的可用性,最后才考虑老版本的可用性

而在现在前缀CSS3和正常CSS3都可用的情况下,前缀CSS3会覆盖正常的CSS3

渐进增强(Progressive Enhancement)

一开始就针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验

渐进增强的写法,优先考虑老版本浏览器的可用性,最后才考虑新版本的可用性

在现在前缀CSS3和正常CSS3都可用的情况下,正常CSS3会覆盖前缀CSS3

总结

优雅降级是从复杂的现状开始,并试图减少用户体验的供给

而渐进增强则是从一个非常基础的、能够起作用的版本开始,并不断扩充,以适应未来环境的需要

选择

低版本用户居多,则优先采用渐进增强的开发流程

高版本用户居多,则为了提高大多数用户的使用体验,那当然优先采用优雅降级的开发流程

业务优先,提升用户体验永远不会排在最前面

最重要的还是保证尽可能多的用户可以正常访问网站,在此之后再考虑降级的极端情形和现代浏览器的体验增强

@tk12138
Copy link

tk12138 commented Nov 16, 2021

答:优雅降级:一开始构建站点的完整功能,然后针对浏览器测试和修复。渐进增强是一开始只构建站点的最少特性,然后针对浏览器追加功能。两者关注于同一网站在不同设备里不同浏览器下的表现程度。区别在于:
① 优雅降级观点认为应该针对那些最高级,最完善的浏览器来设置网站,而那些被认为“过时”或有功能缺失的浏览器下的测试工作应该安排在开发周期的最后阶段,并把测试对象限定为主流浏览器的前一个版本。
② 而渐进增强观点则认为应该关注于内容本身。
③ “优雅降级”就是首先完整实现整个网站,包括其中的功能和效果,然后再为那些无法支持所有功能的浏览器增加候选方案,使之可以在旧式浏览器上以某种形式降级体验而不至于完全失效。而“渐进增强”则是从浏览器的基础功能出发,首先为所有设备定义好
清晰且语义化的html及完整内容,然后再以无侵入的方式向页面增加无害于基础浏览器的额外样式和功能,当浏览器升级时,它们会自动呈现并发挥作用。

@WangXi01
Copy link

  1. 优雅降级:先保证现代浏览器的运行与展示,再兼容老的内核,像ie的展示
  2. 渐进增强:先兼容好老的浏览器,再适度使用新的特性

@Iambecauseyouare
Copy link

渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和最佳功能达到更好的用户体验
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容

@an31742
Copy link

an31742 commented Aug 8, 2023

优雅降级(Graceful Degradation)和渐进增强(Progressive Enhancement)是两种不同的前端开发策略,目的都是提供更好的用户体验,但在处理浏览器兼容性和功能支持方面有所差异。

  1. 优雅降级(Graceful Degradation):这种策略首先构建一个完全功能的应用程序,针对最先进的浏览器进行开发,利用最新的 HTML、CSS 和 JavaScript 特性。然后,在不支持这些新特性的旧版本浏览器上,以一种优雅的方式进行降级,使应用程序在这些浏览器上仍能正常运行。

    优雅降级的思想是先从最好的情况出发,然后根据浏览器的能力逐步做出妥协。在降级过程中,可能会去掉某些功能、改变布局或样式,并提供某些替代的操作途径或内容展示方式,以保证应用在旧版本浏览器上的可用性。尽管在旧版本浏览器上可能不具备最先进的效果,但至少能良好运行。

  2. 渐进增强(Progressive Enhancement):这种策略则是从基础功能出发,为所有浏览器构建一个基本可用的应用程序。随后,通过逐步增加和增强功能,针对现代浏览器提供更丰富、更交互性的体验。

    渐进增强的思想是从简单到复杂,先确保核心功能的可用性和性能,然后通过添加额外的功能或改进用户界面来提升用户体验。这样,即使旧版本浏览器可能无法支持某些高级特性,基本功能仍然保持可用,并且在支持这些特性的现代浏览器上提供更丰富的体验。

总结来说,优雅降级是先构建高级功能,并向下兼容以支持旧版本浏览器,而渐进增强是从基础功能开始,并逐步增加更高级的功能以提供更好的用户体验。两者的目标都是为了确保应用程序在不同环境和浏览器中的可访问性,并提供最好的用户体验。选择何种策略则取决于具体的项目需求和目标用户的浏览器使用情况。

@lili-0923
Copy link

  • 优雅降级

先不兼容低版本的浏览器,优先最新版浏览器效果,之后再逐渐兼容低版本浏览器。

优雅降级的观点:应针对最高级、最完善的浏览器来开发网站。

渐进增强的写法:优先考虑老版本浏览器的可用性,最后才考虑新版本的可用性。

而在现在前缀CSS3和正常CSS3都可用的情况下,正常CSS3会覆盖前缀CSS3。

  • 渐进增强

考虑兼容,以较低版本浏览器效果为主,之后再逐渐增加对新版本浏览器的支持。以内容为主,这也是多数公司所采用的方法。

渐进增强的观点:应关注于内容本身。

优雅降级的写法:优先考虑新版本浏览器的可用性,最后才考虑老版本的可用性。

而在现在前缀CSS3和正常CSS3都可用的情况下,前缀CSS3会覆盖正常的CSS3。

  • 如何选择

低版本用户居多,则优先采用渐进增强的开发流程;

高版本用户居多,则为了提高大多数用户的使用体验,采用优雅降级的开发流程;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests