web front-end route to share learning css3 of progressive enhancement and downgrading , progressive enhancement and downgrading these two concepts it 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
To make a decision based on the client version of your users are using. Please note that my language - I did not use the browser, but with the client. Because it is compatible with the issue of choice in the software development process and the high-low version of the software version of the software on the face of the new features of the concept of progressive enhancement and graceful degradation of nature. Server program rarely have this problem, because the developer can control the version of the server running the program, it does not matter the problem of progressive enhancement and graceful degradation. But the client is not the developer's control (you can not force the user to upgrade their browser bar). Our so-called client, can refer to the browser, mobile devices (such as: mobile phones, tablet PCs, smart watches, etc.) and their corresponding application (browser corresponding website, a mobile terminal device corresponds to the corresponding APP) .
There are now a mature technology that allows you to analyze your use version proportions client program. If the low-user version of the majority, of course, give priority to progressive enhancement of the development process; if the high version of the user in the majority, in order to improve the experience for most users, of course, give priority to graceful degradation of the development process.
But the fact is kind of how it? The vast majority of large companies are using progressive enhancement, because the business priorities, improve the user experience is never at the top.