`
AILIKES
  • 浏览: 183941 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

渐进增强和优雅降级

 
阅读更多

优雅降级(graceful degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。

渐进增强(progressive enhancement):一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。

 

优雅降级:

使用优雅降级方案,Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,绝大多数Web设计师和开发者都通过专门的样式表或针对不同版本的IE的hack实践过优雅降级了;
使用优雅降级技术时,你必须首先完整的实现了网站,其中包括所有的功能和效果。然后再为那些无法支持所有功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

渐进增强:

从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能。渐进增强是值得所有开发者采用的做法。渐进增强方案并不假定所有用户都支持javascript,而总是提供一种候补方法,确保用户可以访问(主要的)内容。
使用渐进增强时,无需为了一个已成型的网站在旧式浏览器下正常工作而做逆向工程。首先,只需要为所有的设备和浏览器准备好清晰且语义化的HTML以及完善的内容,然后再以无侵入(unobtrusive)的方式向页面增加无害于基础浏览器的额外样式和功能。当浏览器升级时,它们会自动地呈现出来并发挥作用。

想让网站在任何环境下看起来都保持一致是不可能的,不管为此付出多少努力,结局依旧会令你失望。与其试图让IE看起来堪比年轻它十岁的浏览器,不如努力改善网站的可访问性,或是进行更多的可用性测试,而不仅仅是让页面看起来“更靓一点”。
某些CSS3特性在不支持它的浏览器中简直是“无法模拟实现”的,但若使用渐进增强,就无需为了能让你的网站适合所有人而放弃这些技术。仅仅因为部分人不愿或不能升级浏览器,却让使用新型浏览器的用户无法享受CSS3所提供的伟大技术,这是毫无道理可言的。

我们应该先让网站能够正常工作于尽可能旧的浏览器上,然后不断为它在新型浏览器上实现更多的增强和改进。随着时间的推移,当越来越多的人开始升级浏览器而浏览器本身的支持度也不断提升时,就会有越来越多的人体验到这些增强和改进,它持续有效的使网站越来越好,却如需你刻意做什么。只需要一次实现,它就让网站的体验与时俱进。

分享到:
评论

相关推荐

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

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

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

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

    优雅降级和渐进增强.pptx

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

    darwinjs-rails:Darwin 是一个 JavaScript 框架,适用于那些认真对待错误处理并希望通过渐进增强和优雅降级来实现它的人

    Darwin 是一个 JavaScript 框架,适用于那些认真对待错误处理并希望通过渐进增强和优雅降级来实现它的人。 Darwin 还将让开发人员编写干净和封装的代码,以鼓励自我文档化。 安装 将此行添加到应用程序的 Gemfile ...

    html、CSS和js面试题

    最后,我们讨论了渐进增强和优雅降级之间的不同。渐进增强是指针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级是指一开始就构建...

    DOM Scripting Web Design with JavaScript and the Document Object Model

    ### DOM Scripting Web设计与...通过遵循非侵入式JavaScript、渐进增强和优雅降级等原则,开发者可以构建出既美观又实用的Web应用程序。此外,本书还附带了一些实际案例,可以帮助读者更好地理解和应用所学的知识点。

    html、CSS和js面试题归纳.pdf

    渐进增强和优雅降级是两种不同的Web开发策略。渐进增强是从基本功能开始,逐步为现代浏览器添加更丰富的功能和视觉效果,确保所有用户都能获得核心体验。而优雅降级则相反,首先构建完整功能的站点,然后针对旧版...

    html、CSS和js面试题.pdf

    面试中可能会问到如何在HTML和CSS基础上使用JavaScript来增强用户体验,比如渐进增强和优雅降级策略。 1. 渐进增强(Progressive Enhancement):先确保基本功能在所有浏览器中可用,然后逐步为高级浏览器添加增强...

    30余个CSS导航菜单效果1.rar

    9. **渐进增强和优雅降级**:为了确保浏览器兼容性,开发者应考虑渐进增强和优雅降级策略。渐进增强是在基本样式基础上逐步增加更复杂的功能,而优雅降级则是确保在旧版浏览器中也能呈现基本功能。 10. **可访问性*...

    完美解决IE6不支持hover的方法

    通过使用CSS Hack、JavaScript/jQuery、条件注释,以及遵循渐进增强和优雅降级的原则,我们可以为这个过时的浏览器提供近似的悬停效果。然而,随着技术的更新换代,考虑逐步淘汰对旧版浏览器的支持,以专注于提供更...

    个浏览器对css属性的不同支持

    4. **使用渐进增强和优雅降级**:结合这两种策略,确保基本功能在所有浏览器中都能工作,同时尽可能利用新特性来提升用户体验。 5. **测试**:使用如BrowserStack或CrossBrowserTesting等在线工具进行跨浏览器测试...

    前端面试宝典V4.0.pdf

    渐进增强和优雅降级是两种不同的设计理念。渐进增强是指从简单到复杂的设计,而优雅降级是指从复杂到简单的设计。 20. iframe iframe 是 HTML 中的一个元素,可以用来嵌入其他网页。iframe 有一些优缺点,例如可以...

    DOM Scripting

    通过深入理解无侵入式JavaScript、渐进增强和优雅降级等概念,以及熟练掌握DOM的操作技巧,开发者可以为用户提供更加丰富、流畅的互联网体验。这本书不仅是初学者的理想入门读物,也是经验丰富的开发者不断参考的...

    javascript和css兼容性小结

    在开发过程中,遵循渐进增强和优雅降级的原则也很重要。渐进增强意味着基础功能对所有浏览器都可用,而更高级的功能只对支持它们的浏览器启用。优雅降级则是确保在新功能不可用时,网站的核心功能仍能正常运行。 ...

Global site tag (gtag.js) - Google Analytics