How to use progressive enhancement and graceful degradation in css3

This time I will show you how to use progressive enhancement and graceful degradation in css3. What are the precautions for using progressive enhancement and graceful degradation in css3? The following is a practical case, let’s take a look. .

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:

Elegant 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 testing

objects to mainstream browsers (such as IE, Mozilla, etc.) previous version. 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, except for fixing larger errors, other differences will be directly ignored.

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 when browsing The support situation in the browser is as follows:

A long time ago: the browser did not support prefix CSS3 and normal CSS3;

Not long ago: the browser only supported prefix CSS3 and did not support normal CSS3;

Now: The browser supports both prefixed CSS3 and normal CSS3;

In the future: The browser does not support prefixed CSS3 and only supports normal CSS3.

(3) Progressive The enhanced writing method 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 the prefix CSS3 in the browser may be different from the normal CSS3 implementation effect, so in the end, the normal CSS3 shall prevail. If you're curious what exactly are the properties that have different explicit effects in prefixed CSS3 and normal CSS3.

(4)How to choose

Make your decision based on the version of the client your users are using. 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 using your client program. 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 method because business is priority and improving user experience will never be at the top. For example: Update on the front end of the Sina Weibo website. For a website with hundreds of millions of users, it is absolutely impossible to pursue a certain special effect without considering whether it is available to users of lower versions. It must ensure that the low version to the high version is available. Accessibility, then progressive enhancement, using new features to provide a better user experience for users of higher versions. 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 the best choice.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

html5 How to create a circle animation effect of pictures

How to use H5’s WebGL in the same The interface makes json and echarts charts

How to use the new semantic tag features of H5

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