优雅降级和渐进增强印象中是随着CSS3流出来的一个概念,由于低级浏览器不支持CSS3,但css3的效果又太优秀不忍放弃,所以在高级浏览器中使用CSS3而低级浏览器只保证最基本的功能。咋一看两个概念差不多,都是在关注不同的浏览器下的不同体验,关键的区别是他们所侧重的内容,以及这种不同造成的工作流程的差异。
举个例子
a{ display:block; width:200px; height:100px; background:aquamarine; /*我就是要用这个新css属性*/ 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:200px } /*那如果我们的产品要求我们要重低版本的浏览器兼容开始*/ a{ /*优先考虑低版本的*/ -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; /*高版本的就肯定是渐进渐强*/ transition: all 1s ease 0s; }
"优雅降级"观点认为应该针对那些最高级。最完美的浏览器来设计网站。
“渐进增强”观点则认为应关注于内容本身。