`

优雅降级和渐进增强

 
阅读更多
理解渐进增强(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
分享到:
评论

相关推荐

    优雅降级和渐进增强.pptx

    前端开发中,"优雅降级"和"渐进增强"是两种重要的策略,它们旨在确保网页在各种浏览器和设备上都能提供良好的用户体验,尤其是在处理浏览器兼容性问题时。这两种策略的核心区别在于它们对待不同版本浏览器的方式。 ...

    Web-前端html+css从入门到精通 169. 渐进增强与优雅降级.zip

    在Web开发领域,"渐进增强(Progressive Enhancement)"和"优雅降级(Graceful Degradation)"是两种重要的设计理念,它们旨在确保网页在不同浏览器和设备上的兼容性和用户体验。这两个概念对于HTML和CSS的学习至关...

    浅谈css3中的渐进增强和优雅降级

    渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器 只保证最基本的功能。二者的目的都是关注不同...

    html5+css3面试题答案.docx

    优雅降级(Gracious Degradation)和渐进增强(Progressive Enhancement)是两种不同的开发策略。渐进增强是指从基本的功能开始,然后逐步添加更多的功能以达到更好的用户体验。而优雅降级则是从完整的功能开始,...

    fekit使用教程.docx

    fekit 支持优雅降级和渐进增强策略。优雅降级是指在高级浏览器中使用最新技术,同时确保基础功能在旧浏览器中也能正常工作;渐进增强则是从基本功能开始,逐步向更现代的浏览器添加增强功能。 **五、模块化开发与...

    前端面试题及答案汇总HTML.pdf

    8. 优雅降级和渐进增强: 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级:一开始就构建完整的功能,然后再针对低...

    2022.最新H5全栈面试题.pdf

    1.7 什么叫优雅降级和渐进增强? 优雅降级是指在浏览器无法支持某些功能时,提供一个降级的版本,例如使用JavaScript来检测浏览器的功能支持,而渐进增强是指在浏览器支持某些功能时,提供一个增强的版本,例如使用...

    基于Modernizr 让网站进行优雅降级的分析.docx

    Modernizr 是一个JavaScript库,它帮助开发者检测用户浏览器对HTML5和CSS3新特性的支持情况,从而实现优雅降级或渐进增强(Progressive Enhancement)。 Modernizr通过运行一系列特性检测,返回一个对象,该对象...

    网页飘窗,兼容当前所有浏览器

    6. **优雅降级和渐进增强**:对于不支持某些特性的浏览器,实现基本功能的“优雅降级”,同时为支持新特性的浏览器提供更好的用户体验(渐进增强)。 通过以上技术手段和策略,我们可以创建一个在各种浏览器环境...

    109_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

    在这个资源中,开发者可以学习到如何编写高效的CSS代码,实现优雅降级和渐进增强,以兼容不同浏览器。此外,源码可能还包含Sass或Less等预处理器语法,它们提供了变量、嵌套规则、混合等特性,提高了CSS的可维护性和...

    网页设计技巧及网页制作常见问题

    因此,理解如何优雅降级和渐进增强,确保没有JavaScript的环境下也能正常浏览,是优秀网页设计师的必备技能。同时,SEO(搜索引擎优化)也是不容忽视的,包括元标签的使用、关键词策略以及确保网站结构清晰,利于...

    CSS禅意花园

    同时,也会引入一些优雅降级和渐进增强的策略,以保证在旧版本或不支持某些特性的浏览器中,网页仍能正常运行。 最后,值得注意的是,虽然《CSS禅意花园》主要关注CSS,但实际的网页设计往往需要结合HTML和...

    3D立方体旋转导航菜单演示.rar

    jQuery的优雅降级和渐进增强策略使得这个特效在不支持JavaScript的环境中也能正常显示。 其次,CSS3是CSS的最新版本,引入了许多新特性,如选择器、边框、背景、阴影、过渡、动画等。在这个示例中,CSS3的3D转换...

    精通CSS 高级Web标准解决方案 第二版 pdf与 源代码

    由于各浏览器对CSS的支持程度不一,书中也详细讨论了如何处理浏览器兼容性问题,包括使用前缀、条件注释、优雅降级和渐进增强等策略,确保在多种浏览器环境下都能获得良好的用户体验。 七、性能优化 书中提到了CSS...

    xhtml+css+js+jQuery+Ajax参考手册

    同时,了解如何优雅降级和渐进增强,确保兼容性是使用jQuery时的重要考虑。 **Ajax** Ajax,全称"Asynchronous JavaScript and XML",是一种在不重新加载整个网页的情况下更新部分网页的技术。它通过JavaScript与...

    JavaScript与Web Service组和实现Ajax五刷新通信(扩展)

    优雅降级和渐进增强** 为了确保在不支持Ajax的旧版浏览器中也能正常工作,可以采用优雅降级策略,为不支持Ajax的浏览器提供备用方案,如使用传统的表单提交。同时,使用渐进增强来确保所有用户都能访问核心功能。 ...

    PragmaticAjax

    - 优雅降级和渐进增强策略 - 处理浏览器兼容性问题 - 用Ajax实现的常见Web应用示例 - 页面状态管理和历史记录管理 - 安全性和隐私考虑 这份资料对于想要深入了解Ajax实战技巧和最佳实践的开发者来说,是一份非常有...

Global site tag (gtag.js) - Google Analytics