https://www.webfx.com/blog/web-design/progressive-enhancement/

With an ever-growing variety of browsing situations and platforms that must be supported, the concept of progressive enhancement has become a hot topic of conversation. Put simply, progressive enhancement is the technique of building websites with strong foundations so that it’s accessible to the wide range of browsing situations — from mobile devices and netbooks, to desktops and screen-readers.

What Is Progressive Enhancement?

In its simplest conceptualization, progressive enhancement is the separation of HTML, CSS and JavaScript.

That’s it, really. If you had to remember one thing about progressive enhancement, it should be that. Think of these web technologies as being in layers, with HTML as the first layer, CSS being the second, and JavaScript (and other client-side technologies that deal with site interactivity, such as Flash or Java applets) as being the third.

By compartmentalizing these website components, we more easily allow our sites the ability to become enhanced depending on the web browser’s capabilities. How would we pragmatically carry out progressive enhancement?

• Markup: Start out with semantic and well-structured HTML for flexibility and interoperability.
• Styling: Progressively enhance the look-and-feel of a design by adding support for browsers with greater features (e.g. WebKit browsers, IE9, Firefox and mobile browsers).
• Behavior: Enhance the site with rich, interactive features on web browsers with JavaScript.

Benefits of Applying Progressive Enhancement Techniques

You should keep in mind that pragmatically implementing the separation of the markup, styling, and behavioral layers would give you many benefits in your site projects. These are the major reasons for embracing progressive enhancement:

• Accessibility: Content is within reach to all visitors.
• Portability: Cross-browser and cross-device support.
• Modularity: Having decoupled components with smart boundaries makes site builds easier and more fault-tolerant.
• Site Performance: Improvements in terms of (perceived) page loading times (which affects usability) is more readily implemented.