当前位置: 首页 > Web前端 > CSS

前端面试题——渐进增强和优雅退化

时间:2023-03-30 15:09:17 CSS

一、背景介绍渐进增强和优雅退化这两个概念是在CSS3出现之后开始流行起来的。因为低级浏览器不支持CSS3,但是CSS3的特效好得让人舍不得放弃,所以在高级浏览器中使用CSS3,而在低级浏览器中只保证最基本的功能。两者的目的都是专注于不同浏览器下的不同体验,但是侧重点不同,导致工作流程不同。2.概念理解2.1ProgressiveEnhancementProgressiveEnhancement:一开始为低版本浏览器构建页面,完成基本功能,然后为高级浏览器进行效果、交互和附加功能,以达到更好的体验。2.2GracefulDegradationGracefulDegradation:从一开始就构建站点的全部功能,然后使其兼容低版本浏览器。比如一开始是利用CSS3的特性构建一个应用,然后逐渐针对主流浏览器进行hack,使其在低版本浏览器上也能正常浏览。3.不同的观点3.1渐进增强渐进增强的观点:我们应该关注内容本身。内容是我们建立网站的动力。有的网站展示它,有的收集它,有的寻找它,有的操纵它,有的网站甚至包括以上所有内容,但相同的是它们都涉及内容。这使得渐进增强成为一种更加合理的设计范式。3.2优雅降级优雅降级的观点:网站应该为最先进、最完善的浏览器而开发。在开发周期的最后阶段安排被认为“过时”或功能缺失的浏览器下的测试工作,并将测试对象限制在主流浏览器(如IE、Mozilla等)之前版本。在这种设计范式下,旧的浏览器被认为只能提供“糟糕但还过得去”的浏览体验。您可以进行一些小的调整以适应特定的浏览器。但由于它们不是我们关注的重点,因此除了修复较大的错误外,其他差异将被忽略。4.示例案例下面两段代码的编写顺序说明了渐进增强和优雅降级的开发侧重点是不同的。前缀CSS3(-webkit-/-moz-/-o-*)andnormalCSS3supportinbrowsers:很久以前:浏览器前缀CSS3和普通CSS3都不支持;不久前:浏览器只支持prefixCSS3,不支持普通CSS3;现在:浏览器同时支持前缀CSS3和普通CSS3;未来:浏览器不支持前缀CSS3,只支持普通CSS3。4.1详细解释progressiveenhancement是怎么写的,优先考虑老版本浏览器的可用性,最后考虑新版本的可用性。虽然前缀CSS3和普通CSS3现在都可用,但普通CSS3会覆盖前缀CSS3。优雅的降级方式优先考虑新版本浏览器的可用性,最后考虑旧版本的可用性。虽然前缀CSS3和普通CSS3现在都可用,但前缀CSS3会覆盖普通CSS3。5.如何选择5.1分析你的客户端程序的版本比例(1)如果低版本用户多,优先选择渐进增强的开发流程;(2)如果高版本用户较多,那么为了提升大部分用户的体验,当然首选优雅降级的开发流程。5.2大多数大公司采用渐进增强的方式来优先考虑业务,提升用户体验永远不会放在首位。举个例子:新浪微博,一个拥有数亿用户的网站,如果不考虑低版本的用户,追求某种特效是绝对不可能的。该功能为高版本用户提供了更好的用户体验。6.总结其实优雅降级和渐进增强都是网站开发的加分项。最重要的是保证尽可能多的用户可以正常访问网站。之后再考虑退化的极端情况和现代浏览器的体验提升。阅读更多