Progressive enhancement and graceful degradation in css3

The two concepts of progressive enhancement and graceful degradation became popular after the emergence of CSS3. Since low-level browsers do not support CSS3, but the special effects of CSS3 are too good to give up, CSS3 is used in high-level browsers, while only the most basic functions are guaranteed in low-level browsers

. The purpose of both is to focus on different experiences under different browsers, but their focus is different, which leads to different workflows.

Progressive Enhancement: Build pages for low-version browsers from the beginning to complete basic functions, and then target advanced browsers for effects, interactions, and additional functions to achieve a better experience.

Graceful Degradation (Graceful Degradation): Build the complete functionality of the site from the beginning, and then test and fix it for browsers. For example, you first build an application using the features of CSS3, and then gradually hack the major browsers so that it can be browsed normally on lower version browsers.

In traditional software development, the concepts of upward compatibility and downward compatibility are often mentioned. Progressive enhancement is equivalent to upward compatibility, while graceful degradation is equivalent to backward compatibility. Backwards compatibility means that higher versions support lower versions, or that later-developed versions support and are compatible with earlier-developed versions. Upward compatibility is rare. Most software is backward compatible. For example, Office2010 can open word files created by Office2007, Office2006, Office2005, Office2003, etc., but Office2003 cannot open word files created by Office2007, Office2010, etc.!

The difference between the two:

Graceful degradation and progressive enhancement are just two perspectives on the same thing. Both graceful degradation and progressive enhancement focus on how well the same website performs in different browsers on different devices. The key difference is where each focuses its attention, and how that attention affects the flow of work.

The elegant 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 were 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 believes that attention should be paid to the content itself. Notice the difference: I didn't even mention the word "browser." Content is what motivates us to 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.

Case analysis:

(1) Code

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

(2) Prefix CSS3 (-webkit-/-moz - / -o-*) and normal CSS3 support in browsers is as follows:

A long time ago: Browser prefix CSS3 and normal CSS3 are not supported;

Not long ago: The browser only supports prefix CSS3, not normal CSS3;

Now: the browser supports both prefix CSS3 and normal CSS3;

In the future: the browser does not support prefix CSS3, only normal CSS3 CSS3.

(3) The writing method of progressive enhancement gives priority to the usability of the old version of the browser, and finally considers the usability of the new version. In situations where both prefixed CSS3 and normal CSS3 are available in period 3, normal CSS3 overrides prefixed CSS3. The way to write graceful downgrade is to give priority to the availability of the new version of the browser, and finally consider the availability of the old version. In the case of period 3 when both prefixed CSS3 and normal CSS3 are available, prefixed CSS3 overrides normal CSS3.

As far as CSS3 is concerned, I prefer the progressive enhancement method. Because the implementation effect of some properties of prefix CSS3 in the browser may be different from that of normal CSS3, so in the end, normal CSS3 will prevail. If you're curious about what properties have different explicit effects in prefixed CSS3 and normal CSS3.

(4) How to choose

Make a decision based on the version of the client used by your users. Please note my wording, I'm not using a browser, I'm using a client. Because the concepts of progressive enhancement and graceful degradation are essentially compatibility issues between low-version software and high-version software facing new features during the software development process. Server-side programs rarely have this problem, because developers can control the version of the server-side running program, so there is no problem of progressive enhancement and graceful degradation. But the client program is beyond the control of the developer (you can't force users to upgrade their browsers). What we call clients can refer to browsers, mobile terminal devices (such as mobile phones, tablets, smart watches, etc.) and their corresponding applications (browsers correspond to websites, and mobile terminal devices correspond to corresponding APPs) .

There is now very mature technology that allows you to analyze the proportion of versions of your client program used. If there are many users of lower versions, of course, the development process of progressive enhancement will be preferred; if there are many users of higher versions, in order to improve the user experience for most users, of course, the development process of graceful degradation will be preferred.

But what is the actual situation? The vast majority of large companies adopt the progressive enhancement approach, because business comes first and improving user experience will never be at the top. For example: when updating the front end of Sina Weibo website, it is absolutely impossible for a website with hundreds of millions of users to pursue a certain special effect without considering whether it is available to users of lower versions. It must ensure the accessibility from low version to high version before proceeding. Progressive enhancement uses new features to provide users with higher versions with a better user experience. But there are no counterexamples. If you develop a software (or website) for teenagers, you know that this group of people always likes to try new things, always likes cool special effects, and always likes to update their software to the latest version (and Unlike our older generation of users). Faced with this situation, the development process of progressive enhancement is actually the best choice.

The above content is an explanation of progressive enhancement and graceful degradation in CSS3. I hope it can help everyone.

What is the difference between progressive enhancement and graceful degradation

About progressive enhancement and graceful degradation_html/css_WEB-ITnose

A brief discussion on progressive enhancement and smooth degradation of javascript_javascript skills

The above is the detailed content of Progressive enhancement and graceful degradation in css3. For more information, please follow other related articles on the PHP Chinese website!