The difference between graceful demotion and progressive enhancement

Before looking at some CSS3 effect demo, found that some write CSS3 properties, the compatibility of the order is not the same, such as transition properties, some put transition in front of some are put in the back, Of course, this may also include coder personal habits or compulsive > "<, such as the following two:

. 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;}

The prefix arrangement should be just for the sake of neat (or does it represent the degree of preference for the browser)? But transition in front or behind has two concepts: graceful demotion and progressive enhancement.

An elegant downgrade and progressive enhancement impression is a concept that flows out with the CSS3. Because the low-level browser does not support CSS3, but the CSS3 effect is too good to give up, so in advanced browsing using CSS3 and low-level browser only guarantee the most basic functions. At first glance, the two concepts are similar, focusing on different experiences under different browsers, and the key difference is the content they focus on, and the difference in workflow that results from this difference.

What is progressive enhancement (progressive enhancement), graceful demotion (graceful degradation)?

Progressive Enhancement Progressive Enhancement: build pages for low-version browsers, ensure the most basic functionality, and then improve and append features such as effects and interactivity for advanced browsers to achieve a better user experience.

Graceful downgrade graceful degradation: Build the full functionality from the beginning and then be compatible with the low-version browser.

The difference: Graceful demotion begins with a complex situation and attempts to reduce the supply of user experience, while the incremental enhancement begins with a very basic, workable version and is continuously expanded to suit the needs of the future environment. Downgrading (functional decay) means looking back, while progressive enhancement means looking forward while keeping its roots in a safe zone.

The "Graceful downgrade" view

The "Graceful downgrade" view is that the site should be designed for the most advanced and sophisticated browsers. Test work in browsers that are considered "obsolete" or functionally missing is scheduled in the final stages of the development cycle, and the test object is limited to the previous version of the main browser (IE, Mozilla, etc.).

In this design paradigm, older browsers are thought to offer only a "poor, but passable" browsing experience. You can make small adjustments to fit a particular browser. But since they are not the focus of our attention, other differences will be ignored in addition to fixing larger errors.

"Progressive enhancement" view

The "progressive enhancement" view is that the focus should be on the content itself.

Content is the incentive for us to build our website. Some sites show it, some collect it, some seek, some operate, and some websites even contain all the above, but the same point is that they all involve content. This makes "progressive enhancement" a more reasonable design paradigm. That's why it was immediately adopted by Yahoo! and used to build its "tiered browser support (graded Browser)" strategy.

Reference: http://stackoverflow.com/questions/2550431/ What-is-the-difference-between-progressive-enhancement-and-graceful-degradation

http://www.candoudou.com/archives/481

(RPM) The difference between graceful demotion and progressive enhancement