什么是渐进增强与优雅降级

  服务器和浏览器是不同的。当服务器有新版本时,开发人员直接使用新版本的服务器提供服务即可;但是浏览器端,不同的用户使用的浏览器版本不同,型号差异大,我们不可能让用户强制更新,所以,浏览器端就需要考虑到所谓的渐进增强和优雅降级了。

       渐进增强(progressive enhancement):主要用户使用低版本浏览器的比较多,所以一开始针对低版本浏览器进行构建页面,完成了基本的功能。 然后针对高级浏览器进行效果、交互增强,功能追加等来达到更好的体验。

  优雅降级(graceful degradation):主要用户使用高版本浏览器的比较多,所以一开始就针对高版本构建了站点的完整功能, 然后针对低版本浏览器进行hack使得低版本浏览器也可以正常浏览。

渐进增强与优雅降级的共同点?

  两者都是为了更好的用户体验。 其中渐进增强是在低版本构建的基础上给高版本浏览器用户更好的体验; 优雅降级是在高版本用户构建的基础上让低版本用户也能使用基本的功能。

渐进增强与优雅降级的区别?

          构建基础不同。渐进增强是以低版本浏览器为基础构建的;优雅降级是以高版本浏览器为基础构建的。

如何选择?

  那么我们如何决定使用优雅降级和渐进增强呢?

  之前再谈到区别时说道渐进增强是说用户主要是低版本浏览器,那么我们就选用渐进增强的方案; 而用户主要是使用高版本浏览器,就选用优雅降级的方案。

  但是,事实上,大多数的厂家采用的方式都是渐进增强,因为很多公司网站的主页目的是业务为主,如果最基本的功能都实现不了,体验又怎么可能好呢?

渐进增强和优雅降级的适用场景?

  就目前来说,主要是针对CSS3的。 看如下两段代码的书写顺序,表示了我们开发的着重点:

.transition { /*渐进增强写法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.transition { /*优雅降级写法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}

  前缀CSS3(-webkit- / -moz- / -o-*)和正常的 CSS3 在浏览器中的支持情况是这样的:

  1. 很久以前:浏览器前缀CSS3和正常的CSS3都不支持。
  2. 不久以前:浏览器只支持前缀CSS3,不支持正常CSS3。
  3. 现在:浏览器既支持前缀CSS3,又支持CSS3。
  4. 未来:浏览器不支持前缀CSS3,仅支持正常CSS3。

 注意: css中需要知道的是 - 如果属性不可用,则不发挥任何作用,无影响;如果属性是相同的作用,则后者会覆盖前者。

      渐进增强的写法,优先考虑老版本浏览器的可用性,最后才考虑新版本浏览器的可用性。

    而优雅降级的写法,优先考虑新版本浏览器的可用性,最后才考虑浏览器的可用性。

   就CSS3来说,我们更加推荐渐进增强的写法。 

渐进增强与优雅降级 && css3中普通属性和前缀属性的书写顺序的更多相关文章

  1. css3渐进增强 VS 优雅降级

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

  2. 浏览器兼容CSS渐进增强 VS 优雅降级如何选择

    由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能.二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以 ...

  3. 渐进增强 VS 优雅降级

    渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果.交互.追加功能达到更好的体验. 优雅降级(Gracefu ...

  4. 兼容性/pollyfill/shim/渐进增强/优雅降级

    http://ued.ctrip.com/blog/browser-compatibility-testing-tools-in-firefox-compatibility-detector.html ...

  5. css考核点整理(十二)-能描述下你在项目中都用到了哪些符合逐渐增强和优雅降级的理念的技巧吗

    能描述下你在项目中都用到了哪些符合逐渐增强和优雅降级的理念的技巧吗

  6. CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了

    HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  7. css3中强大的filter(滤镜)属性

    CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...

  8. CSS3中的变形处理(transform)属性

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...

  9. 总结·CSS3中定位模型之position属性的使用方法

    一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...

随机推荐

  1. 20. Dog,Man's Best Friend 狗,人类最好的朋友

    . Dog,Man's Best Friend 狗,人类最好的朋友 ①The dogs has always been considered man's best friend.Always note ...

  2. SSH整合 第三篇 Spring的加入

    1.思路和想法. 目前理解到的,觉得是的,可能的,应该这样的……………… Spring的两大核心是IoC和AOP Ioc:帮助实例化对象,加载到容器中,在注入到需要用到的地方.这样就可以减少在不同的方 ...

  3. 11i AP & GL 月末对账时常用系统报表

    11i AP & GL 月末对账时常用系统报表  http://www.cnblogs.com/benio/archive/2011/10/14/2212169.html AP: 1.Invo ...

  4. what is HTTP OPTIONS verb

    The options verb is sent by browser to see if server accept cross origin request or not, this proces ...

  5. c#获取word文件页数、字数

    引用命名空间:using Microsoft.Office.Interop.Word; //启动Word程序 Application myWordApp = new ApplicationClass( ...

  6. .NET 日志工具 log4net使用

    1.NuGet安装log4net. 2.修改配置文件 <?xml version="1.0"?> <configuration> <configSec ...

  7. WorkSpace

    --往GridControl中添加绑定数据 // 房间费用 DataTable dtRoomInfo = new DataTable(); dtRoomInfo.Columns.Add("v ...

  8. wpf使用DynamicDataDisplay插件,修改x轴的样式,改成透明的。

    时光偷走的,永远都是我们眼皮底下看不见的珍贵. 问题:X轴会显示灰色拖动条. 解决:将X轴颜色改为透明. DDD插件是开源的,但是网上的参考资料却很少,所以,很多问题在网上搜索不到,因为没有找到该插件 ...

  9. JavaScript学习知识点归纳

    JavaScript学习包括几大方面: 1.基础语法 2.JavaScript核心对象 3.DOM操作 4.BOM操作 5.正则表达式 6.AJAX 7.面向对象编程 以下依次为各版块相关内容==&g ...

  10. 907. Sum of Subarray Minimums

    Given an array of integers A, find the sum of min(B), where B ranges over every (contiguous) subarra ...