渐进增强和优雅降级

浅谈渐进增强和优雅降级

欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

声明：本文参考大佬张鑫旭老师和康斌老师的文章：

• CSS “渐进增强”在web制作中常见应用举例
• 渐进增强 VS 优雅降级

概念

渐进增强：先解决页面基本布局，再逐渐根据需求进行完善，张鑫旭老师在他的博客 CSS “渐进增强”在web制作中常见应用举例里举的例子，很有意思，说是农村包围城市的感觉
优雅降级：先搭建一套针对于最高级浏览器最完善的功能的设计，再慢慢向下兼容，根据上面渐进增强里的例子，让我想到优雅降级有点让一部分人先富起来带动另一部分人富起来的感觉

应用场景

渐进增强和优雅降级都有其一些应用场景

渐进增强

农村包围城市的味道
先说一个简单的例子，例如先完成了页面的基本布局，没有任何特效，那么加个小动画，加个文字阴影等，就是渐进增强了

1. CSS3 text-shadow 文字阴影属性：这个属性在之前做一些布局的时候，用的也很多，一些文字的白色阴影，这让我想到了box-shadow，当然张鑫旭老师在文章后面也提到了
2. CSS3 box-shadow 盒子阴影属性：这个属性就是我上面提到的，做卡片阴影的时候很好用，例如向京东购物的商品简单展示卡片，也可以看一下张鑫旭老师在他的文章中提到的Firefox的例子
3. CSS3 boder-radius 圆角属性：这个常用来制作按钮，或者应用到导航菜单上，显得十分美观，配合切换的时候圆角盒子高亮，提升用户体验
4. CSS3 gradient 渐变背景属性：渐变背景可以说是 CSS3 里一个强大如斯的功能了，线性渐变（linear-gradient）和径向渐变（radial-gradient），常见的应用场景，按钮，标题栏，一些搜索栏等效果，颜色平稳过渡，体验是极好的
5. CSS选择器、伪类：利用选择器和伪类实现的渐进增强也是十分巧妙，例如一个radio单选，点击单选，周围用伪类加上红色外圈，显得更为好看，且伪类不占空间，不影响布局，或者页面导航布局的分割线等
6. 当然，其实渐进增强的例子有很多，比如CSS3 rotate() 旋转属性做鼠标经过图片旋转之类的动画，或者比如CSS3 transition() 过渡属性和CSS3 translate() 属性配合做购物车购物动画
7. 等等，还有很多，具体的应用场景，我用的不够多，但是用的够多的话，像张老师将近十年经验应该就能随手举例一大把场景应用了吧，还可以参照我的CSS3新特性整理这篇博客里列举了很多常用的CSS3新特性，很多都是可以用到渐进增强上的

   优雅降级

   让一部分人先富起来带动另一部分人富起来的感觉
   说一个简单的举例，例如CSS3 linear-gradient首先仅支持IE10

1 2 3

#grad { background: linear-gradient(red,yellow,blue); }

再进行兼容其他浏览器，即优雅降级

1 2 3 4 5 6

#grad { background: linear-gradient(to right, red , blue); /* 标准语法 */ background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 to 15 */ background: -o-linear-gradient(right, red, blue); /* Opera 11.1 to 12.0 */ background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 to 6.0 */ }

CSS3 中有很多属性是需要做优雅降级的，这里不举例

抉择

根据你的客户的客户端版本决定：

1. 若拥有低版本客户端的客户居多，则考虑渐进增强
2. 反之，考虑优雅降级
3. 最主要是为了提升用户体验

事实情况：绝大多数的大公司都是采用渐进增强的方式，因为业务优先，提升用户体验永远不会排在最前面。例如：新浪微博网站前端的更新，拥有这种亿级用户的网站，绝对不可能追求某个特效而不考虑低版本用户可不可用，一定是确保低版本到高版本的可访问性，再去渐进增强

个人观点：当然以上观点，个人觉得过于片面，一个项目就算是最初的演示版本，也不应该单单从用户体验去考虑问题吧

单谈技术的话：

1. 技术方面，是否允许
2. 对于SEO，是否友好

团队层面的话：

1. 时间方面，是否充足

2. 资金方面，是否充足

   等等，其实有很多需要考虑的因素，由于我接触的还少，仅保留意见，以后更新，更欢迎道友们分享