Dr Browsersupport: Or How I Learned to Stop Worrying and Target Evergreen Browsers
Published: 2019-02-28 20:03:05

---
layout: post
published: true
title: Dr Browsersupport: Or How I Learned to Stop Worrying and Target Evergreen Browsers
---

As a developer, your work is your art, and you want to share it with the world. After countless hours, you polish and perfect your work. It's _beautiful_. It's _ready_.

This is why there’s no worse feeling than when a customer opens a link to your project and, with a quick _poof,_ they’re staring at a scrambled rendition of your _magnum opus_. Both of you wonder why this is happening, but it quickly hits you: For whichever reason, your client has failed to sever ties with the dreaded beast that is _Internet Explorer_. They later mention the site also looks “off” on their nephew’s [Tamagotchi](https://en.wikipedia.org/wiki/Tamagotchi "https://en.wikipedia.org/wiki/Tamagotchi").

It’s a delicate tightrope we walk as developers: **we want to build rich, cutting-edge experiences while at the same time invite everyone to the party**. In a world where consumers are unsure [what a computer even is anymore](https://www.theatlantic.com/technology/archive/2015/07/what-is-a-computer-anymore/399014 "https://www.theatlantic.com/technology/archive/2015/07/what-is-a-computer-anymore/399014"), where people can access the web from their [mirrors](https://www.twowaymirrors.com/smart-mirror "https://www.twowaymirrors.com/smart-mirror"), watches, and even their [shoes](https://www.fastcompany.com/3056820/this-comfy-shoe-doubles-as-a-footstep-powered-wi-fi-hotspot "https://www.fastcompany.com/3056820/this-comfy-shoe-doubles-as-a-footstep-powered-wi-fi-hotspot"), how can we ensure we are providing the best experience to everyone? And how can we politely break the news to those holding on to their [dusty 386 tower](https://en.wikipedia.org/wiki/Intel_80386 "https://en.wikipedia.org/wiki/Intel_80386") that [we need to move on](http://outdatedbrowser.com/en "http://outdatedbrowser.com/en")?

For most developers the concept of [Cross-Browser Testing](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing "https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing") is nothing new. In recent years, as web rendering engines have largely found consensus on how to operate, it’s becoming a more permissible task to avoid. What renders properly in Chrome will likely render just the same in Firefox, Edge, and Safari (on OSX anyway). That is because all these browsers share a common trait: They’re [Evergreen](https://www.techopedia.com/definition/31094/evergreen-browser "https://www.techopedia.com/definition/31094/evergreen-browser").

> The term "evergreen" refers to the release strategy. Evergreen browsers are updated frequently in the background, **constantly aligning their compliance with the latest** [**Web Standards**](https://en.wikipedia.org/wiki/Web_standards "https://en.wikipedia.org/wiki/Web_standards") and also adding proprietary features. The version of an evergreen browser lost its importance, because an evergreen browser is expected to run on the most recent version.
> 
> [_What is an Evergreen Browser?_](http://www.adam-bien.com/roller/abien/entry/what_is_an_evergreen_browser "http://www.adam-bien.com/roller/abien/entry/what_is_an_evergreen_browser") _- Adam Bien_

The reasons to keep your browser [up-to-date](https://www.whatismybrowser.com/guides/how-to-be-safe-online/why-should-i-update-my-web-browser "https://www.whatismybrowser.com/guides/how-to-be-safe-online/why-should-i-update-my-web-browser") are [far-and-wide](https://computer.howstuffworks.com/update-internet-browser.htm "https://computer.howstuffworks.com/update-internet-browser.htm"). However, there are a few reasons why someone might browse through the nostalgic lens of IE9 or Netscape: they either don’t know they _need_ to update or they don’t know _how._ The majority of the sites they visit may still be functional, and may provide no cue that anything is wrong, though the console quietly fills with errors behind-the-scenes. Nobody told them [how or why they should use a better browser](https://browser-update.org/ "https://browser-update.org/")!

Developing modern web applications that maintain compatibility with older browsers is admirable, but it ultimately leaves your projects stuck in the long-forgotten age of MySpace. **New technologies exist so we can use them**, not just supplement their functionality with polyfills.

## Prompting to Update

Web usage statistics show that a vast majority of web users have already adopted an Evergreen browser. For desktop users, all new machines come with an Evergreen browser pre-installed. For mobile devices, they are the only option. In fact, as of January 2019, browsers that do not auto-update account for [less than 2% of web traffic](https://www.w3schools.com/browsers/browsers_explorer.asp "https://www.w3schools.com/browsers/browsers_explorer.asp").

However, this 2% should not be brushed off so quickly. It’s important that we [build a better web for everyone](https://medline-confluence.atlassian.net/wiki/spaces/DCOP/blog/2019/02/27/114394344/12+Tips+to+Improve+Accessibility "https://medline-confluence.atlassian.net/wiki/spaces/DCOP/blog/2019/02/27/114394344/12+Tips+to+Improve+Accessibility"). So, for anyone running an unsupported browser, it’s important to inform users to upgrade.

By either _prompting the user that your application will not work properly in an unsupported browser_, or by flat-out _barring their access with a prompt_, you’re drawing a hard line in the sand that needs to exist: The world is constantly changing. The world-wide-web is changing even faster. Update or be left behind. It’s dangerous not to.

## Browser Sniffing

[Browser sniffing](https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent "https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent") (also known as browser detection) is a [set of techniques](https://dev.to/_elmahdim/safe-reliable-browser-sniffing-39bp "https://dev.to/_elmahdim/safe-reliable-browser-sniffing-39bp") used to determine the web browser a visitor is using, and to serve browser-appropriate content to the visitor. Though this practice is still somewhat common, **its usefulness is exclusive to non-evergreen browsers**.

Older developers might recall the most common way to employ browser detection. IE allowed developers to target older versions using [conditional comments](https://www.quirksmode.org/css/condcom.html "https://www.quirksmode.org/css/condcom.html"). For the time, it was a glorious work-around to the massive inconsistencies that existed between versions.

    <!DOCTYPE html>
    <!--[if IE 8 ]> <html class="ie8"> <![endif]-->
    <!--[if IE 9 ]> <html class="ie9"> <![endif]-->

The example above applies a conditional class to the `HTML` element, allowing you to load stylesheets, scripts, and other assets that target a specific version of a browser.

## Feature Detection

Thankfully, the web is now a very different place. Versioning is much less meaningful in newer browsers. Developers don’t write applications to spec for a specific browser. Instead, they employ specific technologies, or features. Only browsers that support that set of features can properly run their software.

[Feature detection](https://www.html5rocks.com/en/tutorials/detection/ "https://www.html5rocks.com/en/tutorials/detection/") (also feature testing) is a technique used for handling differences between runtime environments (typically web browsers or user agents), by [programmatically testing for clues](https://modernizr.com/ "https://modernizr.com/") that the environment may or may not offer certain functionality. Feature detection is arguably more reliable and future-proof than other techniques like browser sniffing and browser-specific CSS hacks.

    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition(function(position) {
        // show the location on a map, perhaps using the Google Maps API
      });
    } else {
      // Give the user a choice of static maps instead 
      // Or prompt them to upgarde their browser
    }

Feature detection allows software to take an inventory of the technologies it uses, allows for graceful degradation, and can provide detailed reasons as to why something is unsupported in the User's current environment – along with detailed steps on how to address the issue.

## Final Words

It’s hard roping off your work from a certain audience, prompting them to instead adhere to _your_ standards. Something about forcing a user to do something to their system feels very… _un-developery_. But the importance of this is paramount: Polyfills only go so far, and security issues abound in older browsers. Giving users a free pass to use dangerously outdated technology includes a hefty price-tag for all of us. The amount of additional code required to run a modern site in a non-modern browser can double its footprint and slow the experience for everyone - even those using modern browsers. Let’s use the time we’ve traditionally spent crying over IE’s [strange implementation](https://github.com/philipwalton/flexbugs "https://github.com/philipwalton/flexbugs") of web technologies and instead: _develop_.

## Resources

*   [Modernizr](https://modernizr.com/ "https://modernizr.com/") is a popular feature detection library that tells you what HTML, CSS and JavaScript features your user’s browser has to offer.

*   [Feature.js](http://featurejs.com/ "http://featurejs.com/") is another fast, simple and lightweight browser feature detection library written in plain JavaScript.

*   [has.js](https://github.com/phiggins42/has.js/ "https://github.com/phiggins42/has.js/") is another popular alternative for feature detection.

*   [MDN’s](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection "https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection") Web Docs offers a great tutorial on how to implement feature detection into your project.

*   [feature-detect](https://www.npmjs.com/package/feature-detect "https://www.npmjs.com/package/feature-detect") is a node package that provides feature detection support for Node.js or Io.js compatible environments. It is not intended to provide feature detection support in browser environments.