Microsoft Edge – don’t do browser detection

  • Article

This article is part of a series of posts detailing specific compatibility tollgates for a modern web, and how you can take action to make sure your site works as intended in the world of modern web browsers:

Don’t do browser detection

Browser Detection is a technique to determine how the webpage should render across many different versions of browsers. In a script this would mean using code like navigator.userAgent to act differently depending on what User Agent string is supplied to the page. Every browser you’re using has a User Agent string that contains information about the browser. Only problem with that “unique” string is that since way back they’ve more or less imitated each other, and today they hold (pretty much) the same information. It is not a reliable way of determining if a feature is supported or not. Simply put – User Agents can’t be trusted.

Why is it important?

Your users will get their best experience in their preferred browser. You can spend less time maintaining separate code bases for various modern browsers including Microsoft Edge.

What will we look for?

We check if the webpage may be using browser detection techniques to determine how the webpage should render across many different versions of browsers, like browser.userAgent.

How can you fix it?

We recommend that instead of browser detection you go with feature detection – a practice that first determines if a browser or device supports a specific feature and then chooses the best experience to render based on this information. Feature detection is a great alternative to browser detection and is commonly used via popular JavaScript libraries like Modernizr or through feature detection code. There’s also sites like CanIUse.com that easily lets you check what features are available in what version of what browser.

CanIUse.com - Pointer events? CanIUse.com - Border images?

Where can you learn more?