【前端面试六】描述一下CSS中的渐进增强,优雅降级之间的区别

程序猿 2021-03-23 20:52:07 1309浏览 加载中

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

"优雅降级"观点认为应该针对那些最高级。最完美的浏览器来设计网站。

“渐进增强”观点则认为应关注于内容本身。

标签: 前端面试 CSS
最后修改:2024-04-26 11:04:34

非特殊说明,本博所有文章均为博主原创。