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.
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, where people can access the web from their mirrors, watches, and even their shoes, 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 that we need to move on?
For most developers the concept of 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.
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 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? - Adam Bien
The reasons to keep your browser up-to-date are far-and-wide. 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!
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.
However, this 2% should not be brushed off so quickly. It’s important that we build a better web for everyone. 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 (also known as browser detection) is a set of techniques 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. 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 (also feature testing) is a technique used for handling differences between runtime environments (typically web browsers or user agents), by programmatically testing for clues 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 of web technologies and instead: develop.
Resources
Modernizr is a popular feature detection library that tells you what HTML, CSS and JavaScript features your user’s browser has to offer.
Feature.js is another fast, simple and lightweight browser feature detection library written in plain JavaScript.
has.js is another popular alternative for feature detection.
MDN’s Web Docs offers a great tutorial on how to implement feature detection into your project.
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.
Top comments (0)