渐进增强VS优雅降级

转载自青盟科技学习平台：http://www.qingmengtech.com/

  由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容，再加上近年来各种用户端设配的频出也把兼容性提升了一个级别。

  但在我们调试各种兼容性的时候最常见的就是css3的兼容。

  然而在我们构建一个web项目的时候肯定要先考虑我们的项目是要以实现完整的功能为主还是以基本功能为主。这就引出了我们今天的主题–渐进增强vs优雅降级

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。
↵那我们在实际项目中要选择哪种方式来实现呢？
↵我们可以先从代码的书写方式来分析比较：
.not-a-square {//渐进增强写法↵ -webkit-border-radius: 10px;↵ -moz-border-radius: 10px;↵ border-radius: 10px;↵}↵

.not-a-square {//优雅降级写法↵ border-radius: 10px;↵ -moz-border-radius: 10px;↵ -webkit-border-radius: 10px;↵}↵
  上面的css3语句想必大家很是熟悉的渐进增强的写法，优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性。在时期3前缀CSS3和正常CSS3都可用的情况下，正常CSS3会覆盖前缀CSS3。优雅降级的写法，优先考虑新版本浏览器的可用性，最后才考虑老版本的可用性。在时期3前缀CSS3和正常CSS3都可用的情况下，前缀CSS3会覆盖正常的CSS3。
↵  可能有很多人之前在写代码的时候并没太注意他们的顺序觉得只是顺序变了并不会影响页面的效果，但大家知道css之所以叫做叠加样式表是因为它的重复属性会被叠加覆盖。比方用Chrome浏览器运行上面的代码你会发现出现的结果并不一样。

我们会发现优雅降级的写法并不是我们最终想要的结果，而渐进增强的写法是我们能够理解的效果。（这里大家注意并不是所有css3改变顺序都会影响效果只有个别的样式会有所差距）,从代码的书写方式来看似乎渐进增强的方式更合适，所以我们在前端开发的时候代码的书写方式一般都是先写带有前缀的css3样式在写正常的css3,
所以在一些我们常见到的大型web项目中使用的是渐进增强的方法。
  那么难道优雅降级的方式就无用武之地了吗？答案肯定是否定的，接下来我们从两种方式的思想上来分析：

渐进增强：在网站设计初期以主体功能为主，一般都以IE为最低兼容对象并逐步的向主流浏览器兼容（如Chrome、Firefox等），这样就会使一些新的前端技术、功能无法全效展示。并追求极致的用户体验也就是说用户使用任何浏览器访问网页都不会觉得有什么不同。比如一些大型的公开网站、门户类网站都会使用渐进增强的方式开发，因为你不知道用户会使用什么样的浏览器和设备访问，你必须做到页面功能的全部兼容。

优雅降级：在网站设计初期以主流浏览器的标准为主，并赋予项目各种新技术和功能已达到最佳展示效果，然后在对一些不兼容的浏览器和设备做一些简单的向下兼容，或直接舍弃。有时我们在浏览一些web网页的时候会发现他有些提示：推荐使用某某浏览器或是请使用某某设备访问等等。这些web项目都舍弃了一些客户端来实现项目的最佳效果，而这种网站还是少数优雅降级的常用场景还有一些公司内部的系统或是特定用户和场景的应用。

  综上所述到底哪种方式适合你的项目，这就要根据你的需求而定，没有哪一种技术是绝对好的也没有哪一种技术是绝对不好的，要应用到最合理的场景才能体现它的价值，有了价值它对于你来说就是好的技术。
参考文档：
https://www.jianshu.com/p/d31...