柚子讴歌的博客

优雅降级与渐进增强

2018/02/09

优雅降级与渐进增强

优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用CSS3的特性构建了一个应用,然后逐步针对各大浏览器进行测试使其可以再低版本浏览器上正常浏览。

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

渐进增强相当于向上兼容,而优雅降级相当于向下兼容,向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本,向上兼容的很少,大多数软件都是向下兼容的

区别

优雅降级认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段

渐进增强则认为应关注于内容本身,而对浏览器则是次要的,因为内容是建立网站的诱因,这使得渐进增强成一种更为合理的设计范例。

例:

1
2
3
4
5
6
7
8
9
10
11
12
.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;
}

前缀CSS3与正常CSS3在浏览器中的支持情况:

  1. 很久以前:浏览器前缀CSS3和正常CSS3都不支持;
  2. 不久之前:浏览器只支持前缀CSS3,不支持正常CSS3;
  3. 现在:浏览器既支持前缀CSS3,又支持正常CSS3;
  4. 未来:浏览器不支持前缀CSS3,仅支持正常CSS3。
CATALOG