优雅降级和渐进增强

发表于 | 分类于

定义：

  • 优雅降级是向下兼容，针对主流最完善的浏览器设计网站，最后向下兼容所谓过时，有功能缺失的浏览器
  • 渐进增强是向上兼容，首要保证内容本身能展示，其他向上追求，适应未来环境的需要，针对高级浏览器进行效果，交互，追加功能达到更好的体验

前缀CSS3（-webkit-* / -moz-* / -o-*）和正常CSS3在浏览器中的支持情况是这样的：

  1. 很久以前：浏览器前缀CSS3和正常CSS3都不支持；
  2. 不久之前：浏览器只支持前缀CSS3，不支持正常CSS3；
  3. 现在：浏览器既支持前缀CSS3，又支持正常CSS3；
  4. 未来：浏览器不支持前缀CSS3，仅支持正常CSS3.
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;
}