There are many ways to approach optimal browser support. For example, you can use very basic CSS and HTML with as little bells-and-whistles as possible. This helps ensure the same experience across all browsers (for better or for worse).

What if you could support all browsers, as well as have nice effects? That’s right, you can have your cake and eat it too!

There are two popular methods for achieving this: Graceful Degradation and Progressive Enhancement.

Let’s look at how these work, shall we?

Graceful Degradation

We have a webpage. It has all of the bells and whistles we desire, such as CSS3 effects.

Clearly, we’ll run into issues with many browsers. So what do we do?

Well, we can simply detect the browser being used through accursed user-agent detection, OR use feature detection (think Modernizr). We then apply an override that deals with the conflict(s) in such a way that it doesn’t make the page look bad. Essentially, the page starts to degrade. You know, gracefully (see what I did there?).

The downside to this method is that we must account for as many browsers as possible. Modernizr can only do so much, and so we are likely to hit a scenario where there is at least one browser that is having issues because of lack of support. We can argue that the user shouldn’t be using such an awful or old browser, but that is a battle that will never be won with clients or management.

I like to think that this method utilizes a blacklist of browsers. If unsure, we like to deliver more instead of less.

Progressive Enhancement

Think graceful degradation, but in reverse!

Instead of starting with awesomeness, we work our way up to awesomeness. This means that your website starts out with a strong vanila HTML + CSS base, then through user-agent or feature detection, enhancements slowly get added depending on browser support.

With progressive enhancement, as little assumptions are made as possible about what a user is capable of viewing.

I like to think that this method uses a white list of browsers. If unsure, we try to deliver less instead of more.

For this reason, progressive enhancement is generally the preferred way to go.

How to Degrade / Enhance?

Generally, this is achieved through feature detection using Modernizr (JavaScript) to remove/override or add enhancements as the page is loaded.

JavaScript or PHP user-agent detection can be used as an alternative if there is known support (or lack there of) for certain browser effects. The benefit of using PHP is that the page can be served differently depending on support, rather than having to use JavaScript to override what was already delivered. Of course, then you have the debate of whether or not you want the user’s browser to handle the “heavy lifting” vs using your web server to do so.