Zatan: progressive enhancement and graceful degradation

As a front-end developers, the most troublesome than browser compatibility. Ancient evil IE6, and now CSS3 incompatible IE7 / 8. In order to ensure that different versions of the browser have a common or a more optimal user experience, we have the front moving bricks of browser-compatible tenacious struggle. The progressive enhancement and graceful degradation one point two different development processes, but also in the early stages of our project will be considered when doing research selection.

Gradual increase in the money / graceful degradation

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 building 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.

At first glance these two concepts a bit tall, in fact, as developers, have been used for more or less just not aware of it in your own projects. Another vocabulary is better understood, progressive enhancement (up / pre-compatible), graceful degradation (backward compatible), upward-compatible high version of the browser, backward compatible with lower versions of the browser.

Difference between the two

Progressive enhancement and graceful degradation 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 the different emphasis of their respective concerns, and how the different concerns affect the process of project development.

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 Chrome, Safari, IE, FireFox, etc.) before a 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!.

Summary: Graceful degradation is complex from the beginning of the status quo and trying to reduce the supply of the user experience, and progressive enhancement is from a very basic, capable of functioning version, and continue to expand to meet the future needs of the environment. Downgrade (graceful degradation) means looking back; and progressive enhancement means looking ahead, while ensuring its roots in the security zone

Code Cases

.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;
}
// -webkit- / -moz- / -o- (浏览器前缀)

A long time ago: Browser prefix do not support CSS3 CSS3 and normal;
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.

Progressive enhancement wording, giving priority to older browsers availability, and finally consider the new version availability. In the case where the 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 where the prefix 3 and CSS3 CSS3 normal period are available, the prefix will override the normal CSS3 CSS3.

Reality project development, it is recommended to use progressive enhancement wording (postcss of autofixer also such an approach), because some attribute prefix CSS3 to achieve the effect in the browser is likely to achieve normal CSS3 effects are not the same, so eventually CSS3 is normally prevail.

Refer to the god Zhangxin Xu's article " need to guard against the order written CSS3 attributes .

how to choose

Low version of the browser users accounted for the majority, give priority to progressive enhancement of the development process;
High version of the browser users accounted for the majority, give priority to graceful degradation of the development process;

In fact the vast majority of large companies are using progressive enhancement, because the business priorities, improve the user experience is never at the top. For example, update Taobao, Jingdong, Sina microblogging sites such as front-end, it is impossible to pursue a low version of the user regardless of the effects may not be available, we must ensure that low version to high version of accessibility, go to progressive enhancement, new to provide users with high-function version better user experience. Of course there are some anti-such as Ali cloud itself is for software developers, this group of people always like to try new things, like always cool special effects, always like to update their software to the latest version, and mostly used Google is the browser that use the iE browser, iE browser version is also high, the face of this situation, graceful degradation of the development process is the better choice.

Reference article

Author: Mingle with the
paper original, place undue welcome that. Reproduced, please indicate the source.