Progressive enhancement and graceful degradation

One . Background introduction ：

Progressive enhancement and elegant degradation are in CSS3 It didn't catch fire until it appeared . Due to low-level browsers ,（ , ） Than （ other ） Such as （ yes ）IE6 etc. , I won't support it CSS3 Browser , however CSS3 The style is particularly excellent. I can't bear to give up , So apply in advanced browsers CSS3 style , In low-level browsers, only basic functions are guaranteed .

“ Progressive enhancement ” Be being Steven Champeon Created in 2003 year 3 month 11 In Austin on the th SXSW Interactive conference , And in 2003 year 3 The month and 6 Through a series of Webmonkey Publication of tutorial articles . （ I've been looking for information for a long time , After reading the English articles, I can only find this history , Helpless face ）, Google is very supportive of this development method , I think incremental enhancement is not just a front-end development idea , It is also a program development idea .

Two . Knowledge analysis

1. What is incremental enhancement

In Web Development , Progressive enhancement believes that we should focus on the content itself . Start by building pages for lower versions of browsers , Meet the most basic functions , Then for advanced browsing Use the browser to effect , Interaction , Add various functions to achieve a better user experience , let me put it another way , Is to meet the minimum requirements , The most basic function is the basic function , Upward compatibility . With css For example , The following expression is progressive enhancement .

2. What is elegance

In Web Development , Elegant demotion refers to building pages for a higher version of the browser at the beginning , First improve all functions . Then test for different browsers , Repair , Ensure that low-level browsers also have basic functions Just fine , Low level browsers are considered “ Simple but no harm (poor, but passable)” You can make small adjustments to suit a particular browser . But because they are not the focus of our attention , Therefore, in addition to repairing Beyond big mistakes , Other differences will be directly ignored . That is, with high requirements , Based on the higher version , Backwards compatible . The same to css For example , Elegant downgrade is written as follows .

3. Difference between the two

1.） If you adopt a progressive and enhanced development process , First make a basic function version , Then gradually increase for each browser , Add various functions . Compared with elegant degradation , Long development cycle , The initial investment is large . If you think about it, it's impossible to show customers a basic function version , How shabby , Maybe I won't ask you to do it when I'm angry , Then it exploded . But what? , There are also advantages. , It provides better platform stability , Maintenance funds are small , Reduce development costs in the long run .

2.） What about elegant downgrade , In this way, we can develop a full functional version for only one browser in a short time , Then you can take it to PM Talk to customers , It can be used to test , The market tests the water , For those whose functions have not been determined product , Elegant downgrade is a cost saving method .