什么是渐进增强和优雅降级?它们有什么不同?

150 阅读1分钟

优雅降级和渐进增强印象中是随着 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;

}

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站 “渐进增强”观点则认为应关注于内容本身