Quick summary: Graceful degradation means using newer features that may not be supported everywhere but providing a solid fallback experience. Progressive enhancement means developing with the most widely supported features and using newer ones only when supported.

With new web frameworks coming out every few months and new JavaScript and CSS libraries seemingly every few weeks, compatibility for older browsers and devices sometimes takes a back seat to the rapid pace of innovation on the web. For example, new CSS frameworks are using the flexbox standard which remains riddled with browser-specific issues. Taking advantage of these new features often means wrangling with obtuse issues in older browsers. There are two philosophies for dealing with these types of inconsistencies: graceful degradation and progressive enhancement.

Graceful Degradation

Graceful degradation allows your application to provide a slightly degraded experience on browsers that lack support for the latest web standards. This means you can create your app using all the newest libraries and features, but you must do something to "fill in" missing features that older browsers don't support. For example, CSS media queries are not supported on IE8 and below, but there is a library that uses JavaScript to mimic the behavior. Libraries that fill in missing features on older browsers are called polyfills. They help you develop with the newest standards but provide a fallback experience for older browsers.

The big advantage of graceful degradation is developing with the latest and greatest standards. But this means that you must write extra code to address specific issues in older browsers.

Progressive Enhancement

Progressive enhancement is the opposite of graceful degradation. Instead of using the newest standards, progressive enhancement starts with only a base set of features that are expected to work for all users. This means that applications are developed with older browsers in mind first, and newer features are only shown on browsers that support them. For example, rounded corners using border-radius are not supported in IE8, but a site developed with progressive enhancement in mind would ignore the non-rounded corners in IE8 (showing square corners instead), but show them rounded on browsers that fully support border-radius.

The advantage of progressive enhancement is being confident in a baseline of features that all your users should be able to use. The disadvantage is that you are not always taking advantage of the latest standards, and extra work must be done to show the "enhanced" experience.