前面的话
看到这两个名词的时候,不是很熟悉,查了相关资料后,其实平时都用过,只是不知道还有这么好听的名字。
"优雅降级"和"渐进增强"是在css3出现之后火起来的。由于低级浏览器不支持css3,但css3的功能太强大,不想放弃。在高级浏览器中使用css3,而在低浏览器中只保证基本功能就行。
名词解释
- 优雅降级(向下兼容): 一开始就构建完整的功能,后针对低版本的浏览器进行兼容。
- 渐进增强(向上兼容):一开始就对低版本浏览器进行构建页面,完整最基本的功能,然后再针对高版本浏览器追加高级功能,达到更好的体验。
CSS3书写顺序
先了解一下浏览器兼容CSS3语法的历程。
- 很久很久以前:浏览器即不宠幸前缀CSS3也不宠幸纯情CSS3(border-radius);
- 不久之前:浏览器只宠幸前缀CSS3,不宠幸纯情的CSS3;
- 现在:浏览器不仅宠幸前缀CSS3属性,还宠幸纯情CSS3属性;
- 等到以后:前缀CSS3就回乡下带孩子了,浏览器只宠幸纯情CSS3属性。
实例
通过实例来说明优雅降级与渐进增强:
- 优雅降级
.transition{
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
- 渐进增强
.transition{
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
参考链接: