渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
渐进增强:
.transition{ -webkit-transition: all .5s; //谷歌,Safari浏览器 webkit内核 -moz-transition: all .5s; //火狐浏览器 gecko内核 -o-transition: all .5s; //Opera浏览器 Blink内核 transition: all .5s; //w3c标准 }
一开始先设计谷歌浏览器的页面效果,然后不断追加其他浏览器效果,最后使用w3c标准实现全部兼容,
从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时,它们会自动地呈现出来并发挥作用
优雅降级:
.transition{ transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; }
一开始就设计出所有浏览器都支持的w3c标准页面效果,然后逐步针对对各大浏览器的兼容。
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的、能够起作用的版本开始,并不断扩充,以适应未来环境的需要。
具体使用看项目实际情况而定。