What is the difference between progressive enhancement and graceful degradation

When I was watching some CSS3 effect demos before, I found that when writing CSS3 attributes, the order of writing compatibility is different, such as the transition attribute. Some put the transition in the front and some in the back. Of course, this may also include The coder's personal habits or compulsions>"<, 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 arrangement with the prefix should be just for neatness (or does it represent the preference for the browser)? But whether the transition is placed in front or behind introduces two concepts: graceful degradation and progressive enhancement.

Elegant degradation and progressive enhancement are a concept that came out with CSS3. Since low-level browsers do not support CSS3, but the effect of CSS3 is too good to give up, CSS3 is used in advanced browsing while low-level browsers only guarantee the most basic functions. At first glance, the two concepts are similar. They both focus on different experiences under different browsers. The key difference is the content they focus on and the differences in workflow caused by this difference.

What are progressive enhancement and graceful degradation?

Progressive enhancement: Build pages for low-version browsers to ensure the most basic functions, and then improve effects, interactions, and add additional functions for advanced browsers to achieve a better user experience.

Graceful degradation: Build complete functions from the beginning, and then make them compatible with lower version browsers.

Difference: Graceful degradation starts from the complex status quo and tries to reduce the supply of user experience, while progressive enhancement starts from a very basic, functioning version and continues to expand to adapt to the future environmental needs. Degradation (functional decay) means looking backward; progressive enhancement means looking forward while keeping its roots in a safe zone.

The "graceful downgrade" view

The "graceful downgrade" view holds that websites should be designed for the most advanced and complete browsers. Arrange the testing of browsers that are considered "outdated" or have missing functions at the last stage of the development cycle, and limit the test objects to the previous version of mainstream browsers (such as IE, Mozilla, etc.).

Under this design paradigm, older browsers are considered to provide only a "poor, but passable" browsing experience. You can make some small adjustments to suit a specific browser. But since they are not the focus of our attention, other differences will be ignored except for fixing larger bugs.

The "progressive enhancement" perspective

The "progressive enhancement" perspective believes that attention should be paid to the content itself.

Content is the reason we build a website. Some websites display it, some collect it, some seek it, some operate it, and some websites even include all of the above, but the same thing 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 "Graded Browser Support" strategy.

The above is the detailed content of What is the difference between progressive enhancement and graceful degradation. For more information, please follow other related articles on the PHP Chinese website!