作为前端开发者，最头疼的就是浏览器兼容性问题。古往今来万恶的IE6，不兼容CSS3的IE7/8。为了保证不同版本的浏览器有共同的或更优化的用户体验，我们不得不在浏览器兼容性上顽强奋斗。渐进增强和优雅退化这两种不同的开发过程，也是我们在项目前期做调研选型时会考虑的一个点。渐进增强（ProgressiveEnhancement）一开始为低版本浏览器构建页面，完成基本功能，然后为高级浏览器进行效果、交互和附加功能，以达到更好的体验。优雅降级从构建功能齐全的网站开始，然后针对浏览器进行测试和修复。比如一开始是利用CSS3的特性构建一个应用，然后逐渐针对主流浏览器进行hack，使其在低版本浏览器上也能正常浏览。乍一看，这两个概念有点高大上。其实作为开发者，你已经或多或少的在项目中使用过它们，只是你没有意识到而已。通过改变词汇更容易理解，渐进增强（向上/向前兼容），优雅降级（向下兼容），向上兼容高版本浏览器，向下兼容低版本浏览器。渐进增强和优雅降级之间的区别只是同一件事的两种观点。渐进增强和优雅降级都关注同一网站在不同设备上的不同浏览器中的表现。关键区别在于它们各自的侧重点以及这种不同的侧重点如何影响项目开发过程。优雅降级观点认为，网站应该为最先进、最完善的浏览器而设计。在开发周期的最后阶段安排对那些被认为“过时”或功能缺失的浏览器进行测试，并将测试对象限制在之前的主流浏览器（如Chrome、Safari、IE、FireFox等）。）版本。在这种设计范式下，旧的浏览器被认为只能提供“糟糕但还过得去”的浏览体验。您可以进行一些小的调整以适应特定的浏览器。但由于它们不是我们关注的重点，因此除了修复较大的错误外，其他差异将被忽略。渐进增强的观点认为，我们应该关注内容本身。注意区别：我什至没有提到“浏览器”这个词。内容是我们建立网站的动力。有的网站展示它，有的收集它，有的寻找它，有的操纵它，有的网站甚至包括以上所有内容，但相同的是它们都涉及内容。这使得渐进增强成为一种更加合理的设计范式。这就是为什么它立即被雅虎采用的原因！构建其“分级浏览器支持”策略。总结：优雅降级从复杂的现状开始，并试图减少用户体验的供应，而渐进式增强则从一个非常基本的工作版本开始，并扩展以适应未来环境的需求。退化（功能衰退）意味着回头看；渐进式增强意味着向前看，同时将它的根放在安全的地方codecase.transition{/*渐进式增强写作*/-webkit-transition:all.5s;-moz-transition:all.5s;-o-过渡：所有.5s；transition:all.5s;}.transition{/*优雅的降级写作*/transition:all.5s;-o-过渡：所有.5s；-moz-transition:all.5s;-webkit-transition:all.5s;}//-webkit-/-moz-/-o-(browserprefixes)很久以前：不支持浏览器前缀CSS3和普通CSS3；不久前：浏览器只支持带前缀的CSS3，不支持普通的CSS3；现在：浏览器同时支持带前缀的CSS3和普通CSS3；未来：浏览器不支持带前缀的CSS3，只支持普通的CSS3。渐进增强是首选旧浏览器的可用性，以及最新版本的可用性。如果前缀CSS3和普通CSS3在epoch3中可用，则普通CSS3会覆盖前缀CSS3。优雅的降级方式优先考虑新版本浏览器的可用性，最后考虑旧版本的可用性。如果前缀CSS3和普通CSS3在epoch3中可用，前缀CSS3将覆盖普通CSS3。在实际项目开发中，推荐使用渐进式增强（postcssautofixer也是这样写的），因为prefixCSS3的一些属性在浏览器中的实现效果可能和普通的CSS3实现效果不一样，所以最后仍以NormalCSS3为准。可以参考张新旭的文章《需要警惕CSS3属性的书写顺序。如何选择使用人数最多的低版本浏览器，优先考虑渐进增强的开发过程；拥有大多数用户的高版本浏览器，优先考虑优雅降级的开发过程；事实上，大多数大公司都采用渐进增强的方式，因为业务是优先级的，提升用户体验永远不会放在首位。比如淘宝、京东、新浪微博等网站在更新前端时，无论低版本用户能否使用，都不可能追求某种特效。该功能为高版本用户提供了更好的用户体验。当然也有一些反制，比如阿里云本身就是面向软件开发者的。这个群体的人总是喜欢尝试新事物，总是喜欢炫酷的特效，总是喜欢把自己的软件更新到最新版本，而且他们使用的大多是谷歌浏览器，即使是用IE浏览器，也是一个高版本IE浏览器。面对这种情况，优雅降级的开发过程是一个更好的选择。参考文章ProgressiveEnhancement,GracefulDegradationProgressiveEnhancementVSGracefulDegradationProgressiveEnhancement和GracefulDegradation有什么区别？需要警惕CSS3属性的书写顺序GracefulDegradation和ProgressiveEnhancement的区别作者：以乐之名欢迎点赞。转载请注明出处。
