【修真院小课堂】渐进增强和优雅降级之间有什么不同

1.背景介绍

渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，

但是 CSS3 特效太优秀无法放弃，所以在高级浏览器中使用CSS3，

而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验，

但是它们侧重点不同，所以导致了工作流程上的不同。

2.知识剖析

1.什么是渐进增强？

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

达到更好的体验。

2.什么是优雅降级？

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

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的

浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个

版本。

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

优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，

能够起作用的版本开始，并不断扩充，以适应未来环境的需要。优雅降级意味着往回看；

而渐进增强则意味着朝前看，同时保证其根基处于安全地带

３.常见问题

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

４.解决方案

现在有很成熟的技术，能够让你分析用户使用浏览器的版本比例。如果低版本用户居多，

当然优先采用渐进增强的开发流程；如果高版本用户居多，

为了提高大多数用户的使用体验，那当然优先采用优雅降级的开发流程。

而事实情况是怎么样的呢？绝大多数的大公司都是采用渐进增强的方式，

因为业务优先，提升用户体验永远不会排在最前面。

例如：新浪微博网站前端的更新，拥有这种亿级用户的网站，

绝对不可能追求某个特效而不考虑低版本用户可不可用，

一定是确保低版本到高版本的可访问性，再去渐进增强，

采用新功能给高版本用户提供更好的用户体验。

但也不是没有反例。如果你开发的是一款面向青少年的网站，

你知道这个群体的人总是喜欢尝试新事物，总是喜欢酷炫的特效，

总是喜欢把它们的软件更新到最新版本。面对这种情况，优雅降级的开发流程实为上选。

５.编码实战

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .transition {
            width: 100px;
            height: 100px;
            background: blue;
            /* transition: width 2s; */
            -webkit-transition: width 2s;
            /* Safari and Chrome */
        }
        .transition:hover {
            width: 300px;
        }
        .box{
            height: 50px;
            width: 500px;
            border: 2px solid #000;
            -webkit-box-shadow: 10px 10px 10px #999;
        }
    </style>
</head>
<body>

    <div class="transition"></div>
    <p>运用了CSS3中的 transition 属性，该属性在低版本IE中将会无效</p>
    <br>
    <br>
    <br>
    <div class="box"></div>
    <p>运用了CSS3中的 box-shadow 属性，该属性在低版本IE中将会无效</p>
</body>
</html>

６.拓展思考

有没有这方面的工具推荐呢

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，

使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

把Autoprefixe添加到资源构建工具（例如Grunt）后，

可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览

器，可修改browsers参数设置。

用autoprefixer工具为编译后的css自动补全所需的前缀，不用手动添加.

７.参考文献

博客园：https://www.cnblogs.com/iceflorence/archive/2017/03/27/6625466.html

博客园：https://www.cnblogs.com/wangking/p/8405689.html

８.更多讨论

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

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

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

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

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

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

鸣谢

感谢大家观看