css优雅降级和渐进增强

最新推荐文章于 2021-11-18 21:47:50 发布

weixin_34183910

最新推荐文章于 2021-11-18 21:47:50 发布

阅读量77

点赞数

文章标签：设计模式前端 ViewUI

原文链接：http://www.cnblogs.com/perallina/p/5824686.html

版权

今天看前端公众号发布的文章，学到了几个新词

1、modernizr

2、@support

3、优雅降级

其中第三个“优雅降级”，如此文艺的名字居然还是第一次听到。度娘了一下，发现[优雅降级]，[渐进增强]两个是相对的概念，总之上面三个词汇都与对css样式的支持息息相关。

所谓[优雅降级]与[渐进增强]并不难以理解，是不同的设计模式

[优雅降级]:通俗来讲，是我们首先满足的是“新“,比如当前的CSS3一些新的特性<canvas><video>……当前所流行的浏览器版本并不完全支持。也许由于我们的用户群体使用的浏览器版本绝大部分可以支持。那么

　　　　　我们的设计可以先来满足这一部分的需求，但同时我们也要考虑到那些低版本的，不能兼容的改特性的浏览器，我们需要添加一些类似于'hack'的技术，使得低版本也可以看到我们要表达的效果。

[渐进增强]:相对于[降级]设计模式是，也许我们的受众群体绝大部分使用的是低版本的浏览器，因此我们实现我们的效果的时候，优先满足低版本的要求，但是对于那些高版本的，我们也会根据其新增效果来添加

　　　　　新效果的实现方式。如我们需要显示用户的头像，低版本的里浏览器我们可以直接用方形显示，而且高版本的浏览器我们就可以使用radius实现其圆形的展示。

总之，两种设计模式的不同是由于侧重点不一样。

像优雅降级举得常见的例子中：

transition{ 
　　 -webkit-transition: all .5s; 
    　　-moz-transition: all .5s;
         -o-transition: all .5s;
            transition: all .5s;
}

这些浏览器兼容顺序也是要根据每个浏览器对属性的支持，也要在实践中才能知道正确与否。

转载于:https://www.cnblogs.com/perallina/p/5824686.html

关注