你能描述一下渐进增强和优雅降级之间的不同吗？

December 16, 2019

1499 views

1232 words

你能描述一下渐进增强和优雅降级之间的不同吗？
--------------------------------------------

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

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

举个例子：

```css
      a {
            display: block;
            width: 200px;
            height: 100px;
            background: aquamarine;
            /*我就是要用这个新 css 属性*/
            transition: all 1s ease 0s;
            /*可是发现了一些低版本浏览器不支持怎么吧*/
            /*往下兼容*/
            -webkit-transition: all 1s ease 0s;
            -moz-transition: all 1s ease 0s;
            -o-transition: all 1s ease 0s;
            /*那么通常这样考虑的和这样的侧重点出发的 css 就是优雅降级*/
      }

a:hover {
            height: 200px;
      }

/*那如果我们的产品要求我们要重低版本的浏览器兼容开始*/
      a {
            /*优先考虑低版本的*/
            -webkit-transition: all 1s ease 0s;
            -moz-transition: all 1s ease 0s;
            -o-transition: all 1s ease 0s;
            /*高版本的就肯定是渐进渐强*/
            transition: all 1s ease 0s;
      }
```

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。 “渐进增强”观点则认为应关注于内容本身。

Last modification：September 4, 2023