Progressive strong, graceful downgrade

Can you describe the difference between progressive enhancement and graceful demotion?

An elegant downgrade and progressive enhancement impression is a concept that flows out with the CSS3. Because the low-level browser does not support CSS3, but the CSS3 effect is too good to give up, so in advanced browsing use CSS3 Low-level browsers only guarantee the most basic functionality. At first glance, the two concepts are similar, focusing on different experiences under different browsers, and the key difference is the content they focus on, and the difference in workflow that results from this difference.

As an example:

a{
DisplayBlock;
width:200px;
height:100px;
BackgroundAquamarine;
/*I'm just going to use this newCSSProperties*/
    Transition All1s Ease0s;
/*but I found some low-version browsers don't support it.*/
    /*down compatible*/
    -webkit-transition: All1s Ease0s;
-moz-transition: All1s Ease0s;
-o-transition: All1s Ease0s;
/*So the usual consideration and such a focusCSSis to downgrade gracefully .*/
}
a:Hover{
height:200px;
}

/*So if our product requires that we want to start with a low version of browser compatibility*/
a{
/*priority is given to the lower version of*/
    -webkit-transition: All1s Ease0s;
-moz-transition: All1s Ease0s;
-o-transition: All1s Ease0s;
/*the high version is definitely progressive.*/
    Transition All1s Ease0s;
}

The " Graceful downgrade " view is that the site should be designed for the most advanced and sophisticated browsers.

The " Progressive enhancement " view is that the focus should be on the content itself.

Progressive strong, graceful downgrade