In previous chapters, we have considered briefly the notion of progressive enhancement. It's an approach to development that I have found so useful in practice I think it bears repeating. The fundamental idea with progressive enhancement is that you begin all your front-end code (HTML, CSS, JavaScript) with the lowest common denominator in mind. Then, you progressively enhance the code for more capable devices and browsers. That may seem simplistic and it is, but if you are used to working the other way around; designing the optimum experience and then figuring out a way of making that thing work on lesser devices/browsers, you'll find progressive enhancement an easier approach.

Imagine a low powered, poorly featured device. No JavaScript, no Flexbox support, no CSS3/CSS4 support. In that instance what can you do to provide a usable experience?

Most importantly, you should write meaningful HTML5 markup that accurately describes the content. This is an easier task if you're building text and content-based websites. In that instance, concentrate on using elements such as main, header, footer, article, section, and aside correctly. Not only will it help you discern different sections of your code, it will also provide greater accessibility for your users at no extra cost.

If you're building something like a web-based application or visual UI components (carousels, tabs, accordions, and the like) you'll need to think about how to distil the visual pattern down into accessible markup.

The reason good markup is so crucial is that it provides a base level experience for all users. The more you can achieve with HTML, the less you have to do in CSS and JavaScript to support older browsers. And nobody, and I really mean nobody, likes writing the code to support older browsers.

It's by no means a simple feat to start thinking in this manner. It is however, an approach that is likely to serve you well in your quest to do as little as possible to support ailing browsers.

Now, about those browsers.