文章转载自：http://www.qingmengtech.com/blogdetail?id=32由于市面上的浏览器种类繁多，不同的浏览器内核不同，所以各个浏览器网页的解析存在一定的差异，这也是造成浏览器兼容性问题的主要原因。我们的网页需要在主流浏览器上正常运行，所以我们需要兼容浏览器。此外，近年来，各种客户端设备配置的频率也将兼容性提升到了一个新的高度。但是我们在调试各种兼容性的时候，最常见的就是css3的兼容性。但是，我们在构建一个web项目的时候，首先要考虑的是我们的项目应该侧重于实现完整的功能还是基本的功能。这就引出了我们今天的话题——ProgressiveEnhancementvsGracefulDegradation渐进增强（ProgressiveEnhancement）：一开始针对低版本浏览器构建页面，完成基本功能，然后针对高级浏览器功能进行效果、交互、添加，实现一个更好的体验。优雅降级：从一开始就构建一个功能齐全的站点，然后针对浏览器进行测试和修复。?那么在实际项目中我们应该选择哪种方式来实现呢？?我们可以先从代码的写法上分析比较：.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项目为了达到项目的最佳效果，放弃了一些客户端，而这类网站仍然是少量优雅降级的常见场景，以及一些公司内部系统或针对特定用户和场景的应用。综上所述，哪种方法适合你的项目取决于你的需求。没有技术是绝对好的，也没有技术是绝对坏的。应该应用到最合理的场景才能体现它的价值，有了价值才是你的好技术。参考文档：https://www.jianshu.com/p/d31...
