【武汉-第十四期】你知道优雅降级和渐进增强吗？

IT修真院武汉分院

大家好，我是IT修真院成都分院第一期的学员冯馨雨，一枚正直纯洁善良的前端程序员。今天给大家带来的是优雅降级和渐进增强的概念简析。

1.背景介绍

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

2.知识剖析

  1.什么是渐进增强？

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

2.什么是优雅降级？

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

     优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

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

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

3.常见问题

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

4.解决方案

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

      而事实情况是怎么样的呢？绝大多数的大公司都是采用渐进增强的方式，因为业务优先，提升用户体验永远不会排在最前面。例如：新浪微博网站前端的更新，拥有这种亿级用户的网站，绝对不可能追求某个特效而不考虑低版本用户可不可用，一定是确保低版本到高版本的可访问性，再去渐进增强，采用新功能给高版本用户提供更好的用户体验。<br><br>但也不是没有反例。如果你开发的是一款面向青少年的网站，你知道这个群体的人总是喜欢尝试新事物，总是喜欢酷炫的特效，总是喜欢把它们的软件更新到最新版本。面对这种情况，优雅降级的开发流程实为上选。

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.参考文献

http://www.jianshu.com/p/d313f1108862

https://segmentfault.com/q/1010000000264469

http://blog.csdn.net/xiongzhengxiang/article/details/7999525

http://www.cnblogs.com/mofish/p/3822879.html