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.