对渐进增强和优雅降级的理解？#

优雅降级 和 渐进增强 是两种在 web 开发种常用的设计哲学,旨在确保网站不同浏览器和设备上的兼容性,提供更好的用户体验

一 优雅降级#

优雅降级是指优先开发一个功能完整的网站,并确保其在现代浏览器中正常运行,然后在较为老的浏览器中提供降级方案,使其能够以某种方式工作,而不是完全崩溃,这种方法的目标是确保网站在各种环境中都能正常运行,同时保留一些现代浏览器的高级功能

二 渐进增强#

渐进增强是指先考虑较老的浏览器和设备,确保网站在这些环境中能够良好运行,然后为现代浏览器提供一些额外的功能,以便提供更好的用户体验.这种方法的目标是确保网站能在任何情况下都可以工作,并为一些现代浏览器提供额外的优化和功能

三 两者区别#

• 优雅降级更注重现代浏览器的性能和功能，并在必要时提供降级方案。渐进增强更注重网站的基础功能，并为现代浏览器提供额外的优化和功能
• 在优雅降级中，先开发功能完整的网站，然后为较老的浏览器提供降级方案。在渐进增强中，先考虑较老的浏览器和设备，确保网站在这些环境中能够良好运行，然后为现代浏览器提供额外的优化和功能
• 优雅降级可能会导致在旧版浏览器或设备上出现问题，如果没有提供降级方案，网站可能会出现错误或根本无法使用。渐进增强可以确保网站在各种浏览器和设备上都能够良好运行，但是在现代浏览器上无法充分利用浏览器的性能和功能

四 举例说明#

/* 渐进增强写法，先关注兼容性在考虑高级的 */
.transition {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
/* 优雅降级写法，先关注最高级的再考虑兼容 */
.transition {
  transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

总结#

一个先做好应对高级的，再向下兼容，一个先做好基础的，再向上扩展