渐进增强与优雅降级

Posted 2020-08-17 Cmyoung

什么是优雅降级？

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

Code demo

.transition{
    -webkit-transition: all .5s;  /* webkit 内核 */
    -moz-transition: all .5s;     /* firefox 内核 */
    transition: all .5s;          /* 标准写法 */
}

什么是渐进增强？

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

Code demo

.transition{
    transition: all .5s;          /* 标准写法 */
    -moz-transition: all .5s;     /* firefox 内核 */
    -webkit-transition: all .5s;  /* webkit 内核 */
}

两者区别

其实两者并没有实质性的区别，对待事物的两种不同的观点，

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