【武汉分院第一百五六期】渐进增强和优雅降级之间有什么不同?

1、背景介绍

渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀无法放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以导致了工作流程上的不同。

2.知识剖析

1.什么是渐进增强?

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

2.什么优雅降级?

优雅降级(graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

3.渐进增强和优雅降级有什么不同?

优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。优雅降级意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

3.常见问题

渐进增强和优雅降级该如何选择?

4.解决方案

现在有很成熟的技术,能够让你分析用户使用浏览器的版本比例。如果低版本用户居多,当然优先采用渐进增强的开发流程;如果高版本用户居多,为了提高大多数用户的使用体验,那当然优先采用优雅降级的开发流程。

然而事实情况是怎么样的呢?绝大多数的大公司都是采用渐进增强的方式,因为业务优先,提升用户体验永远不会排在最前面。例如:新浪微博网站前端的更新,拥有这种亿级用户的网站,绝对不可能追求某个特效而不考虑低版本用户可不可用,一定是确保低版本到高版本的可访问性,再去渐进增强,采用新功能给高版本用户提供更好的用户体验。

但也不是没有反例。如果你开发的是一款面向青少年的网站,你知道这个群体的人总是喜欢尝试新事物,总是喜欢酷炫的特效,总是喜欢把它们的软件更新到最新版本。面对这种情况,优雅降级的开发流程实为上选。

5.编码实战

.transition { /*渐进增强写法*/

-webkit-transition: all .5s;

-moz-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

.transition { /*优雅降级写法*/

transition: all .5s;

-o-transition: all .5s;

-moz-transition: all .5s;

-webkit-transition: all .5s;

}

6.扩展思考

优雅降级和渐进增强是为了什么?

为了网站内容在不同设备里的不同浏览器都有良好的表现,

7.参考文献

参考一:渐进增强 VS 优雅降级

参考二:segment

参考三:博客

参考四:博客

8.更多讨论

构建站点你的选择是什么?

ptteng.github.io/PPT/PPT/css-13-the%20difference%20between%20gd%20and%20pe.html#/


渐进增强和优雅降级之间有什么不同?_腾讯视频

推荐阅读更多精彩内容

  • 今天给大家分享一下,深度思考中的知识点——渐进增强和优雅降级有什么不同? 一、背景介绍在前端开发的过程中,经常需要...
    南木小屋阅读 1,392评论 0 2
  • 一图胜千言 印象中,渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,...
    糖心m阅读 196评论 0 1
  • 前在看一些css3效果demo的时候,发现有些写css3属性时,兼容性的写法顺序不太一样,比如transition...
    朱古力_豆儿阅读 1,536评论 0 0
  • 大家好,我是IT修真院成都分院第5期的学员,一枚正直纯洁善良的web程序员 一.背景介绍: 渐进增强和优雅降级是在...
    张王王阅读 448评论 0 0
  • 心里面千遍万遍的讲述着,可是对着你,却一遍都讲不出来。我猜,你也是在乎着我的,可是我怎么就感受不到你在乎我呢?矛盾...
    老芳阅读 89评论 0 1
  • 有没有人想和我认真的谈个恋爱呢~ 也许多年后,回头看,这个问题是否很幼稚可笑,但我相信缘分。 我在路上走着 看着 ...
    230325阅读 93评论 0 1
  • 绿水轻舟 成群鹅鸭 白云青山 此间天堂 夕阳西下 渔歌唱晚 倒影 孔明灯 夜游
    豆沙铜锣烧阅读 84评论 0 0
  • 16岁的我们共用一个课桌 胳膊与胳膊也不过十厘米的间隔 我余光里的你,无时无刻不牵扯着我 可性格里根深蒂固的自卑脆...
    BULABULA小八阅读 181评论 0 1
  • 毕业了也不知道自己擅长什么,兴趣在哪里,能做什么,不知道什么行业有前景,只得先找一份勉强能养活自己的工作,日复一日...
    力友码字的地方阅读 125评论 0 1