An example of how we might apply a collection of styles only for web browsers that support CSS Grid.

Managing fallback styles

Despite progressive enhancement being fairly simple to achieve technically, we still have to think carefully about how to apply it. I aim for a baseline experience that is as simple as possible; for example, layouts might occupy only a single column. Content will be rendered linearly, based on the order it appears in HTML, and some visual flourishes may not appear. Websites should be perfectly accessible in this form. If all else fails, and CSS and JS do not work, visitors should still be able to make use of the semantic HTML that forms the skeleton of the frontend. Assistive technologies that aid visitors rely on the presence of semantic HTML, so it’s extremely important.

As is the case for so many questions that face us during the development process, we must consider who will be using our website before settling on which techniques and fallbacks to use. In many cases, it’s acceptable to make use of modern techniques coupled with simple fallbacks. In others, a significant segment of our audience might be using less capable web browsers. In such a scenario, it may be preferable to focus on providing an enhanced experience using older techniques. Consult your site statistics to determine where your time is best invested.

In either case, it’s important to be cautious of creating many complicated forks in your CSS. Each fallback has a maintenance cost. Sometimes it might be tempting to fork an entire layout, so that we can deliver some estimation of the intended layout in all web browsers. I think it’s important to avoid this wherever possible; the maintenance cost alone of this approach can be great. There’s an entire mosaic of different devices and browsers that will be used to visit a website, naturally there might be some differences in the way a site appears.

The new frontend baseline

Browser vendors are releasing updates faster than ever. IE usage is steadily diminishing, and Microsoft’s next web browser will be evergreen: updating continually and automatically. We are perhaps only a few short years away from being able to deliver websites targeted squarely at modern web browsers. For some projects, this is even a reality today. As browsers improve, we can slowly strip away fallbacks from our arsenal. Of course, there will always be new techniques with varying support, but we are close to establishing a new baseline collection of techniques that will be available in most web browsers. These techniques (such as Grid, Custom Properties, Flexbox, and Calc) present a marked change in the way we build websites. They empower web developers to create more robust and visually ambitious websites that scale smoothly between display sizes, with less code than ever before.