The nuance of browser support with JavaScript

I often say that “I support all modern browsers” with the code that I write. But what does that mean, actually?

Let’s dig in.

What’s a “modern browser?”

For me, a modern browser is one of the evergreen (automatically updating) desktop browsers: Edge, Firefox, Chrome, and Safari. It also includes the most popular and common mobile browsers: WebKit View, Chrome, and FireFox on Android; Safari on iOS.

It does not include legacy browsers like IE (including IE 11). It also excludes popular but feature-lite browsers like Opera Mini.

What does “support” mean?

This is where, in my opinion, the nuance really comes in.

This means different things for me depending on context...

• For nice-to-have features and extras/flourishes, the feature only works in modern browsers. An example of this might be smooth-scrolling to anchor links. That’s a progressive enhancement that doesn’t work in IE or Opera Mini. They get hard jumps to anchor links instead.
• For core-features that are essential to how an app works, I use a combination of older and better supported browser methods, polyfills, and transpiling to get broad support. Most importantly, I’ll still use progressive enhancement with a server fallback when I can, because things break in browsers all the time.
  

The browser is a fragile, fickle beast. Servers? Less so.

We need to plan for failure with everything we build, because it’s inevitable.