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?
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.
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?
Incoming search terms:
- bootstrap graceful degradation or progressive enhancement