渐进增强、优雅降级

何为渐进增强、优雅降级

常用两种策略:要么优雅降级(graceful degradation,一开始就构建站点的完整功能,然后针对浏览器测试和修复),要么渐进增强(progressive enhancement,一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。 


两者间的(微妙)差别

万一你正挠着后脑勺,试图找出“优雅降级”和“渐进增强”之间的差别,那么我可以告诉你:“它们是看待同种事物的两种观点”。“优雅降级”和“渐进增强”都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处,以及这种关注如何影响工作的流程。

优雅降级”观点

优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本。

在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。请注意其中的差别:我甚至连“浏览器”三个字都没提

内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。


GD和PE的区别在于:功能衰减是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。功能衰减意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。




### 渐进增强优雅降级的概念 #### 渐进增强(Progressive Enhancement) 渐进增强是一种设计策略,旨在创建能够在任何浏览器中工作的基本功能网页。在此基础上逐步增加更复杂的功能来提升用户体验,但这些额外特性不会影响核心功能的可用性[^1]。 对于实现方式而言,开发者会先确保最基础的内容和服务可以在所有环境中被访问到;随后利用CSS、JavaScript等技术为支持更好特性的平台提供更多样化的视觉呈现和交互模式[^3]。 ```html <!-- 基础HTML结构 --> <article> <h1>文章标题</h1> <p>这是文章正文。</p> </article> <!-- 使用CSS美化 --> <style> article { font-family: Arial, sans-serif; } </style> <!-- 利用JavaScript添加动态效果 --> <script> document.querySelector('article').addEventListener('click', function() { alert('您点击了这篇文章'); }); </script> ``` #### 优雅降级(Graceful Degradation) 相比之下,优雅降级是指最初面向最新技术和标准开发完整的应用程序或网站,当检测到不兼容的情况时,则移除某些高级特性以维持最低限度的服务质量而不破坏整体布局或功能性[^2]。 这意味着如果用户的设备不具备处理特定资源的能力——比如旧版IE浏览器可能无法解析最新的HTML5标签——那么该部分将会被简化显示而不是完全失效[^4]。 ```html <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="ie8-and-down.css"> <![endif]--> ``` 上述代码片段展示了如何针对Internet Explorer 8及其以下版本加载专门样式表文件,从而保证即使是在较老的技术环境下也能获得可接受的表现形式。 ### 主要区别 两者的主要差异在于出发点的不同: - **渐进增强** 是从简单的起点出发,逐渐向更高层次发展; - **优雅降级** 则是从理想状态开始构建,并准备应对各种潜在局限条件下的退化方案[^5]。 尽管方法论有所区别,但在实际项目实施过程中往往需要综合运用这两种理念,以确保最大范围内的良好用户体验并兼顾向前兼容性和向后兼容性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值