Progressive Enhancement in Web Design

PHP Code on a screen shot with shallow depth of field
\. Getty Images/Scott-Cartwright

Web browsers have been around as long as websites have. In fact, browsers are an essential ingredient in the experience or people viewing your site - but not all browsers are created equally. It is entirely possible (and actually fairly probably) to have customers viewing your web pages in browsers that are extremely old and missing the features that are found in more modern browsers. This can pose significant problems as you strive to develop websites that take advantage of the latest advances in website design and development. If someone comes to your site using one of those antiqued browsers, and your latest advanced techniques do not work for them, you could be delivering a poor experience overall. Progressive enhancement is a strategy of handling web page design for different browsers, namely those old browsers that are lacking in modern support.

Progressive enhancement is a way of designing web pages so that the more features a user agent supports, the more features the web page will have. It is the opposite of the design strategy known as graceful degradation. That strategy builds pages for the most modern browsers first and then ensures that they also work reasonably well with less functional browsers - that the experience "degrades gracefully." Progressive enhancement starts with the less capable browsers first and builds an experience up from there.

How to Use Progressive Enhancement

When you create a web design using progressive enhancement, the first thing you will do is to create a design that works for the lowest common denominator of web browsers. At its core, progressive enhancement says that your content should be available to all web browsers, not just a sub-set. This is why you begin by supporting these old, outdated, and less capable browsers. If you create a site that works well for them, you know you have created a baseline that should deliver at least a usable experience to all visitors. 

When starting with the least capable browsers first, you will want to ensure that all your HTML should be valid and semantically correct. This will help ensure that the widest variety of user agents can view the page and display it accurately.

Remember that visual design styles and overall page layout is added by using external style sheets. This is really where the progressive enhancement happens. You use the style sheet to create a site design that works for all visitors. You can then add additional styles to enhance the page as the user agents gain functionality. Everyone gets the baselines styles, but for any news browsers that can support the more advanced and more modern styles, they get some extra. You "progressive enhance" the page for browsers that can support those styles.

There are a few ways that you can apply progressive enhancement. First off, you should consider what a browser does if it does not understand a line of CSS - it ignores it! This actually works in your favor. If you create a baseline set of styles that all browsers understand, you can then add additional styles for new browsers. If they support the styles, they will apply them. If not, they will ignore them and just use those baseline styles. A simple example of progressive enhancement can be seen in this CSS:

.main-content {
background: #999;
background: rgba(153,153,153,.75);

This style first sets the background to a greyish color. The second rule uses RGBA color values to set a level of transparency. If a browser supports RGBA, it will override the first style with the second. If it does not, only the first one will be applied. You have set a baseline color and then added extra styles for more modern browsers.

Using Feature Queries

Another way you can apply progressive enhancement is to use what are known as "feature queries". These are similar to media queries, which are an essential piece of responsive website designs. While media queries text for certain screen sizes, feature queries will check to see if a certain feature is supported or not. The syntax you would use is:

@supports (display: flex) {

Any styles you added inside this rule would only work if that browser supported "flex", which is the styles for Flexbox. You could set one set of rules for everyone and then use feature queries to add extra for select browsers only.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 12/13/16.