理解渐进增强(Progressive Enhancement)
我们在这里用渐进增强和优雅降级做对比。
优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响。
首先,什么是优雅降级,就是随着浏览器版本的向前,网站的优雅程度逐渐降低,也就是我们在开发网站应用时,先关注我们的应用是否能在最新的浏览器上运行,在开发末期,才去考虑把让老版本的浏览器支持我们的一些关键功能,但是其已经缺少了足够的优雅性,或者说没有很好的用户体验。参考
http://www.ryanbay.com/?p=97,一个比较典型的开发过程就是:我们现在FireFox上开发项目,然后针对比如IE版本的浏览器,修复不兼容的地方和去除那些无法被IE实现的功能。
渐进增强:就是把网站的开发划分为三个部分,第一部分是最基础的部分,就是html部分,一定要让所有具体的细节都得到展示,并在所有浏览器上都进行测试,保证站点页面在低级浏览器中的可用性和可访问性的基础上,再去开发其他部分;第二部分是CSS,当然,可能不会有所有浏览器都支持,但是起码他们的基本显示不成问题了;而这里其实就是一种避免大锅饭的思想,不是让页面在所有的浏览器中都显示相同的内容,而是让那些有优势的浏览器能够显示更好的内容,我们使用内容和表示相分离的方式,也就是外部链接的方式;第三部分是JS,我们使用内容和行为相分离的方式,也就是使用外部JS的方式,我们可以参考
http://darkbaby123.iteye.com/blog/620696 其中讲了一些如何将JS放在外部的方式。 所以我们也可以这样理解,这种渐进增强的方式也是我们使用外部链接来引入CSS和JS的原因,这样我们就防止浏览器因不能解析html标签中的CSS和JS而不能显示最基本的内容。
这种开发方式可以视为无侵入式开发 , Unobtrusive,译为“不唐突的”/“无侵入式”/“和谐”,是运用优雅降级和渐进增强的重要原则。
引用
通过使用某些技术,当浏览器支持相应功能时文档会得到增强(渐进增强),而当浏览器不支持相应功能时,文档被退化(平稳退化)。但不支持相应功能的浏览器也会获得同一文档的具备相同信息量但却不一样的视图。Web开发人员目前的任务就是开发出具有不唐突性,也就是能够根据浏览器能力实现渐进增强或平稳退化的Web应用来。
一些值得参考的网页:
举了一些CSS渐进增强的例子
http://blog.163.com/crk135@126/blog/static/1021499992011511105535998/
http://www.ryanbay.com/?p=97
分享到:
相关推荐
优雅降级和渐进增强的理解
Web-前端html+css从入门到精通 169. 渐进增强与优雅降级.zip
如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的...
渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器 只保证最基本的功能。二者的目的都是关注不同...
Darwin 是一个 JavaScript 框架,适用于那些认真对待错误处理并希望通过渐进增强和优雅降级来实现它的人。 Darwin 还将让开发人员编写干净和封装的代码,以鼓励自我文档化。 安装 将此行添加到应用程序的 Gemfile ...
优雅降级 一开始就构建站点的完整功能,然后针对浏览器测试和修复。认为应该针对那些最高级、最完善的浏览器来开发网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段 渐进增强...
9.谈谈你理解的优雅降级和渐进增强?10.style标签写在body前和body后的区别是什么?11.什么是FOUC?你是如何避免FOUC的?12.用css创建一个三角形,并简述原理?13.谈一下清除浮动的几种方法14.谈一下css常用的布局...
“渐进增强”观点则认为应关注于内容本身。 内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有 的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”...
前端面试问题总和,例如渐进增强和优雅降级的区别、src和href的区别、对HTML语义化的理解、css有哪些选择器、px和em的区别
原文:Understanding Progressive Enhancement作者:Aaron Gustafson翻译:http://lifesinger.org/从1994年开始,Web开发社区就敲响了 优雅降级(Graceful Degradation) 的鼓声。这个概念来自工程世界,其核心理念...
6、你能描述一下渐进增强和优雅降级之间的不同吗? 7、为什么利用多个域名来存储网站资源会更有效? 8、请谈一下你对网页标准和标准制定机构重要性的理解。 9、请描述一下cookies,sessionStorage 和localStorage 的...
我们如何将渐进增强技术应用于 CSS? 2003 年流行的做法是优雅降级:构建您的 Web 功能以便在更现代的浏览器中提供一定级别的用户体验的做法,但它也会优雅地降级到旧浏览器中较低级别的用户体验。 例如: You don'...
slowNumber.js 动画数字的最简单,最快的方法。...渐进增强法 您还记得本世纪初有关优雅降级和逐步增强的辩论吗? 它仍然与我有关。 如果出现问题并且您JavaScript无法加载,则您的网站或应用仍然有意义。
渐进增强和优雅降级的区别 浏览器存储Cookie、sessionStorage、localStorage、IndexedDB HTTP状态码 CSS基础 1.div居中 2.flex布局 3.grid布局 4.BFC 5.高性能的css动画 详情 JavaScript基础 变量和类型 1....
你能描述一下渐进增强和优雅降级之间的区别吗? 您能描述一下您创建网页时的工作流程吗? 描述您将如何创建一个简单的幻灯片页面。 解释 CSS 动画与 JavaScript 动画的一些优缺点。 解释标准和标准机构的重要性。 ...
渐进增强/优雅降级 响应式与自适应设计 在哪里插入样式和脚本标签以及为什么 你如何调试/重构? 与团队合作与成为独立开发人员 后端语言知识/经验(php、sql、MongoDB等) 如何处理遗留代码 终端命令 有 git/版本...
vs没报错leetcode报错全栈开发 介绍 设置 安装文本编辑器(visual studio code) 安装节点 安装邮递员 安装sql 安装mongodb ...性能、负载测试、性能测试、渐进式增强/优雅降级、版本控制(例如,GIT