渐进增强和优雅降级之间有什么不同？

渐进增强和优雅降级之间有什么不同？

1.背景介绍

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

先看一个例子：

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

                            -webkit-transition: all .5s; /*Safari and Chrome*/

                               -moz-transition: all .5s;/*Firefox*/

                                 -o-transition: all .5s;/*Opera*/

                                    transition: all .5s;

                          }

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

                                    transition: all .5s;

                                 -o-transition: all .5s;/*Opera*/

                               -moz-transition: all .5s;/*Firefox*/

                            -webkit-transition: all .5s;/*Safari and Chrome*/

                          }

2.知识剖析

2.1什么是渐进增强和优雅降级

          渐进增强（progressive enhancement）

       针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

     优雅降级（graceful degradation）

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

       区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，对版本较高的浏览器追加不同的功能

3.常见问题

     在网页布局中如何选择？

4.解决方案

      如果软件开发的预算和时间充足，就不存在抉择的问题，可以两者都调整到一个最佳状态，而不用权衡，做选择题了。然而现实很残酷，要么开发周期短，要么开发预算少，或者二者兼而有之，这个时候该如何抉择？

分析使用你客户端程序的版本比例。

如果低版本用户居多，当然优先采用渐进增强的开发流程； 如果高版本用户居多，为了提高大多数用户的使用体验，那当然优先采用优雅降级的开发流程。。

大多数公司是怎么处理这个问题的：

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

5.编码实战

< body>

< div></ div>

< p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</ p>

< p>< b>注释：</ b>本例在 Internet Explorer 中无效。</ p>

< input type= "text" class= "text">

</ body>

div {

width: 100 px;

height: 100 px;

background: blue;

/* transition: width 2s; */

-webkit-transition: width 2 s;

/* Safari and Chrome */

}

div :hover {

width: 300 px;

}

.text{

height: 50 px;

width: 500 px;

-webkit-box-shadow: 0 0 30 px 2 px #333;

}

比如这个阴影 和渐变，，低版本浏览器不支持css3新属性，但是我们可以写个带前缀的，这样在低版本浏览器实现基本功能，当用户使用的是高版本浏览器则出现阴影和渐变，达到更好的交互效果

6.扩展思考

     Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

                        把Autoprefixe添加到资源构建工具（例如Grunt）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置  。

7.参考文献

你能描述一下渐进增强和优雅降级之间的不同吗?（面试题目）

渐进增强和优雅降级之间的区别在哪里？

8.更多讨论

问：要自己手动添加吗，有没有自动的生成？

答：有，比如Autoprefixer，它是一款自动管理浏览器前缀的插件

问：为什么有的网站不写前缀

答：其实，随着浏览器不断更新发展，以后都会支撑css3新属性，不用写前缀了

问：使用渐进增强好还是优雅降级好

答：这个根据实际情况，大多数我们用渐进增强，先保证大多数用户的使用。