高端网站建设的小知识,服务器租用多少钱一台,建筑公司网站设计详情,榆林做网站多少钱作为一名前端开发人员#xff0c;最头疼的莫过于浏览器兼容。远古时期万恶的IE6#xff0c;到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验#xff0c;前端搬砖的我们不得不与浏览器兼容顽强斗争。而渐进增强和优雅降级两种不同的开发流程… 作为一名前端开发人员最头疼的莫过于浏览器兼容。远古时期万恶的IE6到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验前端搬砖的我们不得不与浏览器兼容顽强斗争。而渐进增强和优雅降级两种不同的开发流程也是在我们项目初期做调研选型时会考虑的一个点。 渐进增强Progressive Enhancement 一开始就针对低版本浏览器进行构建页面完成基本的功能然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。 优雅降级graceful degradation 一开始就构建站点的完整功能然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。 初一看这两个概念有点高大上其实作为开发人员来说多多少少已经在项目中运用只是你自己不察觉而已。换个词汇就比较好理解了渐进增强向上/前兼容优雅降级向下兼容向上兼容高版本浏览器向下兼容低版本浏览器。 二者区别 渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注的着重点不同以及这种不同的关注点如何影响项目开发的流程。 优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段并把测试对象限定为主流浏览器如 ChromeSafariIE、FireFox等的前一个版本。在这种设计范例下旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点因此除了修复较大的错误之外其它的差异将被直接忽略。 渐进增强观点则认为应关注于内容本身。请注意其中的差别我甚至连“浏览器”三个字都没提。内容是我们建立网站的诱因。有的网站展示它有的则收集它有的寻求有的操作还有的网站甚至会包含以上的种种但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。 概括优雅降级是从复杂的现状开始并试图减少用户体验的供给而渐进增强则是从一个非常基础的能够起作用的版本开始并不断扩充以适应未来环境的需要。降级功能衰减意味着往回看而渐进增强则意味着朝前看同时保证其根基处于安全地带 代码案例 .transition { /*渐进增强写法*/-webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .transition { /*优雅降级写法*/ transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; } // -webkit- / -moz- / -o- (浏览器前缀) 很久以前浏览器前缀CSS3和正常CSS3都不支持不久之前浏览器只支持前缀CSS3不支持正常CSS3现在浏览器既支持前缀CSS3又支持正常CSS3未来浏览器不支持前缀CSS3仅支持正常CSS3.渐进增强的写法优先考虑老版本浏览器的可用性最后才考虑新版本的可用性。在时期3中前缀CSS3和正常CSS3都可用的情况下正常CSS3会覆盖前缀CSS3。优雅降级的写法优先考虑新版本浏览器的可用性最后才考虑老版本的可用性。在时期3中前缀CSS3和正常CSS3都可用的情况下前缀CSS3会覆盖正常的CSS3。 现实项目开发中推荐使用渐进增强的写法postcss的autofixer也是这种写法因为前缀CSS3的某些属性在浏览器中的实现效果有可能与正常的CSS3实现效果不太一样所以最终还是得以正常CSS3为准。 可参考张鑫旭大神的文章《需警惕CSS3属性的书写顺序》。 如何选择 低版本浏览器用户占比居多优先采用渐进增强的开发流程高版本浏览器用户占比居多优先采用优雅降级的开发流程事实上绝大多数的大公司都是采用渐进增强的方式因为业务优先提升用户体验永远不会排在最前面。例如淘宝京东新浪微博等网站前端的更新不可能追求某个特效而不考虑低版本用户可不可用一定是确保低版本到高版本的可访问性再去渐进增强采用新功能给高版本用户提供更好的用户体验。当然也有一些反例如阿里云本身就是面向软件开发者这个群体的人总是喜欢尝试新事物总是喜欢酷炫的特效总是喜欢把它们的软件更新到最新版本而且大多用的是谷歌浏览器即使用IE浏览器也是高版本IE浏览器面对这种情况优雅降级的开发流程才是更好的选择。 参考文章 渐进增强、优雅降级渐进增强 VS 优雅降级渐进增强和优雅降级之间的有什么不同?需警惕CSS3属性的书写顺序优雅降级和渐进增强的区别 转载于:https://www.cnblogs.com/guchengnan/p/9405301.html
