Good programmers share css3 web front-end learning route of progressive enhancement and downgrading

  Good programmers web front-end route to share learning css3 of progressive enhancement and downgrading , progressive enhancement and downgrading these two concepts is after emergence of CSS3 fire up. Since the low-level browser does not support CSS3, CSS3 effects too good but could not bear to give up, so the use of CSS3 in the advanced browser, and in the lower browser only guarantee the most basic functions. The purpose of both is concerned about the different experiences in different browsers, but they have different focus, resulting in a difference in the workflow.

  Progressive enhancement ( Progressive Enhancement): outset be constructed for low version of the browser page, perform basic functions, and then the effect of interaction for advanced browser, add a function to achieve a better experience.

  Graceful degradation ( Graceful Degradation): start to build a fully functional site, and then for browser testing and repair. For example, a start using CSS3 properties of building an application, and then gradually hack for the major browsers so that it can be properly viewed on the lower versions of the browser.

  In traditional software development, often referred upward compatible and backward compatible concepts. Progressive enhancement is equivalent to upwards compatible, but degrade gracefully equivalent backwards compatibility. Downward compatibility means that version to support high version supports low version or late-stage development and development compatible with earlier versions, upward compatible few. Most software is backward compatible, for example, Office2010 can open Office2007, Office2006, Office2005, Office2003 such as word documents to build, but can not be opened by using Office2003 Office2007, Office2010 and other word files built!

  Difference between the two:

  Graceful degradation and progressive enhancement just look at two views of the same kinds of things. Progressive enhancement and graceful degradation are concerned about the level of performance in the same site in different browsers and different devices inside. The key difference lies in their respective focus on how where and concerned about the impact of this work process.

  Graceful degradation idea that should be targeted at those most advanced, most complete browser to design websites. And those are considered "obsolete" or have plans for testing in loss of function of the browser in the final stages of the development cycle, and the test object is limited to major browsers (such as IE, Mozilla, etc.) of the previous version. In this design example, older browsers can only be considered to provide "simple but anyway (poor, but passable)" browsing experience. You can make some small adjustments to accommodate a particular browser. But because they are not the focus of our concern, so in addition to repair a large error, other differences are simply ignored.

  Progressive enhancement view is that the focus should be on the content itself. Please note the difference: I can not even "browser" in the name did not mention. Our website content is the establishment of incentives. Some sites show it, some collect it, some seeking, some operations, as well as sites even contain all the above, but the same point is that they are all related to the content. This makes progressive enhancement become a more rational design paradigm. This is why it was immediately adopted and used to construct its "hierarchical browser support (Graded Browser Support)" the reason policy where Yahoo!.

  case study:

(1) Code

{.transition / * * written progressive enhancement /

      -webkit-transition: all .5s;

      -moz-transition: all .5s;

      -o-transition: all .5s;

         transition: all .5s;

}

{.transition / * written graceful degradation * /

          transition: all .5s;

       -o-transition: all .5s;

     -moz-transition: all .5s;

  -webkit-transition: all .5s;

}

 

  ( 2) prefix CSS3 (-webkit- / -moz- / -o- * ) and normal circumstances CSS3 support in the browser it is this:

  A long time ago: Browser prefix CSS3 and CSS3 normally do not support;

  Shortly before: the browser supports only the prefix CSS3, does not support the normal CSS3;

  Now: The browser supports both prefix CSS3, and support normal CSS3;

  Future: browser does not support prefix CSS3, supported only normal CSS3.

  ( 3) progressive enhancement wording, giving priority to older browsers availability, and finally consider the new version availability. In the case of a prefix 3 and CSS3 CSS3 normal period are available, the normal CSS3 CSS3 will override prefix. Graceful degradation wording, giving priority to the availability of a new version of the browser, and finally consider the old version availability. In the case of normal and 3 CSS3 CSS3 prefix period are available, the prefix will override the normal CSS3 CSS3.

  On CSS3 this example, I am more respected progressive enhancement wording. Because some attribute prefix CSS3 to achieve the effect in the browser it is likely to achieve normal CSS3 effects are not the same, so eventually be subject to normal CSS3. If you're curious about what the effect is not the same property explicitly prefix in CSS3 CSS3 and normal.

  ( 4) how to choose

  根据你的用户所使用的客户端的版本来做决定。请注意我的措辞,我没有用浏览器,而是用客户端。因为渐进增强和优雅降级的概念本质上是软件开发过程中低版本软件与高版本软件面对新功能的兼容抉择问题。服务端程序很少存在这种问题,因为开发者可以控制服务端运行程序的版本,就无所谓渐进增强和优雅降级的问题。但是客户端程序则不是开发者所能控制的(你总不能强制用户去升级它们的浏览器吧)。我们所谓的客户端,可以指浏览器,移动终端设备(如:手机,平板电脑,智能手表等)以及它们对应的应用程序(浏览器对应的是网站,移动终端设备对应的是相应的APP)。

  现在有很成熟的技术,能够让你分析使用你客户端程序的版本比例。如果低版本用户居多,当然优先采用渐进增强的开发流程;如果高版本用户居多,为了提高大多数用户的使用体验,那当然优先采用优雅降级的开发流程。

  然而事实情况是怎么样的呢?绝大多数的大公司都是采用渐进增强的方式,因为业务优先,提升用户体验永远不会排在最前面。

 


Guess you like

Origin blog.51cto.com/14479068/2433686