优雅降级和渐进增强是随着css3流出来的一个概念,由于低级浏览器不支持css3,但css3效果太优秀,又不忍放弃,所以在高级浏览器中使用css3而低级浏览器只保证最基本的功能。
举个栗子:
优雅降级
a{
display: block;
width: 200px;
height: 200px;
background: aquamarine;
/*这是一个新的css3属性,我们要用它*/
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: 500px;
}
渐进增强:
a{
display: block;
width: 200px;
height: 200px;
background: aquamarine;
/*产品要求我们从低版本的浏览器兼容开始*/
/*优先考虑低版本的*/
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
/*高版本的在后面就是渐进增强*/
transition: all 1s ease 0s;
/*通常这样考虑的和这样的侧重点出发的CSS就是渐进增强*/
}
a:hover{
height: 500px;
}
优雅降级针对的是最高级、最完善的浏览器来设计网站。
渐进增强主要是关注与内容本身,不太注重样式。