理解渐进增强(Progressive Enhancement)
我们在这里用渐进增强和优雅降级做对比。
优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响。
首先,什么是优雅降级,就是随着浏览器版本的向前,网站的优雅程度逐渐降低,也就是我们在开发网站应用时,先关注我们的应用是否能在最新的浏览器上运行,在开发末期,才去考虑把让老版本的浏览器支持我们的一些关键功能,但是其已经缺少了足够的优雅性,或者说没有很好的用户体验。参考[url]http://www.ryanbay.com/?p=97[/url],一个比较典型的开发过程就是:我们现在FireFox上开发项目,然后针对比如IE版本的浏览器,修复不兼容的地方和去除那些无法被IE实现的功能。
渐进增强:就是把网站的开发划分为三个部分,第一部分是最基础的部分,就是html部分,一定要让所有具体的细节都得到展示,并在所有浏览器上都进行测试,保证站点页面在低级浏览器中的可用性和可访问性的基础上,再去开发其他部分;第二部分是CSS,当然,可能不会有所有浏览器都支持,但是起码他们的基本显示不成问题了;而这里其实就是一种避免大锅饭的思想,不是让页面在所有的浏览器中都显示相同的内容,而是让那些有优势的浏览器能够显示更好的内容,我们使用内容和表示相分离的方式,也就是外部链接的方式;第三部分是JS,我们使用内容和行为相分离的方式,也就是使用外部JS的方式,我们可以参考[url]http://darkbaby123.iteye.com/blog/620696[/url] 其中讲了一些如何将JS放在外部的方式。 所以我们也可以这样理解,这种渐进增强的方式也是我们使用外部链接来引入CSS和JS的原因,这样我们就防止浏览器因不能解析html标签中的CSS和JS而不能显示最基本的内容。
这种开发方式可以视为无侵入式开发 , Unobtrusive,译为“不唐突的”/“无侵入式”/“和谐”,是运用优雅降级和渐进增强的重要原则。
[quote]通过使用某些技术,当浏览器支持相应功能时文档会得到增强(渐进增强),而当浏览器不支持相应功能时,文档被退化(平稳退化)。但不支持相应功能的浏览器也会获得同一文档的具备相同信息量但却不一样的视图。Web开发人员目前的任务就是开发出具有不唐突性,也就是能够根据浏览器能力实现渐进增强或平稳退化的Web应用来。[/quote]
一些值得参考的网页:
举了一些CSS渐进增强的例子[url]http://blog.163.com/crk135@126/blog/static/1021499992011511105535998/[/url]
[url]http://www.ryanbay.com/?p=97[/url]
我们在这里用渐进增强和优雅降级做对比。
优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响。
首先,什么是优雅降级,就是随着浏览器版本的向前,网站的优雅程度逐渐降低,也就是我们在开发网站应用时,先关注我们的应用是否能在最新的浏览器上运行,在开发末期,才去考虑把让老版本的浏览器支持我们的一些关键功能,但是其已经缺少了足够的优雅性,或者说没有很好的用户体验。参考[url]http://www.ryanbay.com/?p=97[/url],一个比较典型的开发过程就是:我们现在FireFox上开发项目,然后针对比如IE版本的浏览器,修复不兼容的地方和去除那些无法被IE实现的功能。
渐进增强:就是把网站的开发划分为三个部分,第一部分是最基础的部分,就是html部分,一定要让所有具体的细节都得到展示,并在所有浏览器上都进行测试,保证站点页面在低级浏览器中的可用性和可访问性的基础上,再去开发其他部分;第二部分是CSS,当然,可能不会有所有浏览器都支持,但是起码他们的基本显示不成问题了;而这里其实就是一种避免大锅饭的思想,不是让页面在所有的浏览器中都显示相同的内容,而是让那些有优势的浏览器能够显示更好的内容,我们使用内容和表示相分离的方式,也就是外部链接的方式;第三部分是JS,我们使用内容和行为相分离的方式,也就是使用外部JS的方式,我们可以参考[url]http://darkbaby123.iteye.com/blog/620696[/url] 其中讲了一些如何将JS放在外部的方式。 所以我们也可以这样理解,这种渐进增强的方式也是我们使用外部链接来引入CSS和JS的原因,这样我们就防止浏览器因不能解析html标签中的CSS和JS而不能显示最基本的内容。
这种开发方式可以视为无侵入式开发 , Unobtrusive,译为“不唐突的”/“无侵入式”/“和谐”,是运用优雅降级和渐进增强的重要原则。
[quote]通过使用某些技术,当浏览器支持相应功能时文档会得到增强(渐进增强),而当浏览器不支持相应功能时,文档被退化(平稳退化)。但不支持相应功能的浏览器也会获得同一文档的具备相同信息量但却不一样的视图。Web开发人员目前的任务就是开发出具有不唐突性,也就是能够根据浏览器能力实现渐进增强或平稳退化的Web应用来。[/quote]
一些值得参考的网页:
举了一些CSS渐进增强的例子[url]http://blog.163.com/crk135@126/blog/static/1021499992011511105535998/[/url]
[url]http://www.ryanbay.com/?p=97[/url]