CSS中的优雅降级和渐进增强

浏览器的种类日益增多，浏览器对一段程序中的CSS3支持程度也存在千差万别。
就比如有些低级浏览器（IE6）不支持CSS3，这就使得程序员在编写程序时，需要在同一段CSS中加入前缀不同的同一属性代码，用来适配各浏览器。常用的浏览器及对应的前缀如下：

-webkit-border-radius-:;  //谷歌浏览器、360浏览器（具有相同内核）
-ms-border-radius-:;    //ie浏览器
-moz-border-radius-:；   //火狐浏览器
-o-border-radius-:;    //Opera（欧朋）浏览器

根据适配顺序的不同，我们常分为渐进增强和优雅降级两种适配方法。

渐进增强

-webkit-border-radius-:;  //谷歌浏览器、360浏览器（具有相同内核）
-ms-border-radius-:;    //ie浏览器
-moz-border-radius-:；   //火狐浏览器
-o-border-radius-:;    //Opera（欧朋）浏览器
border-radius:;

渐进增强，又称为向上兼容。可以解释为程序的设计构建一开始是针对低版本浏览器进行的，满足最基本的功能，再针对高级浏览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本。

由此引出的渐进增强的缺点是开发周期长，初期消耗资金大。
优点可以说是维护成本小，提供了良好的平台稳定性，长期来说是降低了成本。

优雅降级

border-radius:;
-webkit-border-radius-:;  //谷歌浏览器、360浏览器（具有相同内核）
-ms-border-radius-:;    //ie浏览器
-moz-border-radius-:；   //火狐浏览器
-o-border-radius-:;    //Opera（欧朋）浏览器

优雅降级，又称为向下兼容。指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。

优雅降级的优点可以说为短期内拿出一个只适用于一个浏览器的完整功能成品给PM看，可以拿着这个去找客户谈、去测试、试水等。

基于功能优先于体验这一因素，绝大多数公司都是采用的渐进增强。

参考文章：https://segmentfault.com/a/1190000017199139