search
HomeWeb Front-endCSS TutorialProgressive enhancement and graceful degradation of css3

This time I will bring you the progressive enhancement and graceful degradation of CSS3. What are the precautions for CSS3 progressive enhancement and graceful degradation? 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:

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 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 the case of period 3 when both prefixed CSS3 and normal CSS3 are available, 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 should 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 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 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 approach, because business comes first 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 goes to the high version. 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 method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the transform function in CSS3

css3 animation sequence animation

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

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
In Defense of the Ternary StatementIn Defense of the Ternary StatementApr 22, 2025 am 11:25 AM

Some months ago I was on Hacker News (as one does) and I ran across a (now deleted) article about not using if statements. If you’re new to this idea (like I

Using the Web Speech API for Multilingual TranslationsUsing the Web Speech API for Multilingual TranslationsApr 22, 2025 am 11:23 AM

Since the early days of science fiction, we have fantasized about machines that talk to us. Today it is commonplace. Even so, the technology for making

Jetpack Gutenberg BlocksJetpack Gutenberg BlocksApr 22, 2025 am 11:20 AM

I remember when Gutenberg was released into core, because I was at WordCamp US that day. A number of months have gone by now, so I imagine more and more of us

Creating a Reusable Pagination Component in VueCreating a Reusable Pagination Component in VueApr 22, 2025 am 11:17 AM

The idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there

Using 'box shadows' and clip-path togetherUsing 'box shadows' and clip-path togetherApr 22, 2025 am 11:13 AM

Let's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this

All About mailto: LinksAll About mailto: LinksApr 22, 2025 am 11:04 AM

You can make a garden variety anchor link () open up a new email. Let's take a little journey into this feature. It's pretty easy to use, but as with anything

It's pretty cool how Netlify CMS works with any flat file site generatorIt's pretty cool how Netlify CMS works with any flat file site generatorApr 22, 2025 am 11:03 AM

Little confession here: when I first saw Netlify CMS at a glance, I thought: cool, maybe I'll try that someday when I'm exploring CMSs for a new project. Then

Testing for Visual Regressions with PercyTesting for Visual Regressions with PercyApr 22, 2025 am 11:02 AM

It’s a Herculean task to test

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Atom editor mac version download

Atom editor mac version download

The most popular open source editor