Riding the Modern Web: Avoiding Browser Detection

  • Article

Not all browsers or browser versions support the same features at a given time. Therefore, you need to swap out or change functionality in your website based on the browser (version) the user has. A commonly used approach is to add browser detection code to your website which will provide the best experience based on the browser type and give a suboptimal experience to other browsers.

The concern with this approach is that you go away with browser evolution. Moreover, the browser type is often determined based on the user-agent string, which has been described as “an ever-growing pack of lies” by Patrick H. Lauke. All user agent strings actually contain more information about other browsers than the actual browser you’re using. Browsers specifically perform user agent spoofing to aid compatibility.

As a result, it is not recommended to use browser detection based on the user agent string, but instead perform feature detection. Feature detection is the mechanism where you interrogate the browser and check if the specific feature you want to use is actually available. There are great JavaScript frameworks, to help you with feature detection, such as Modernizr. By doing feature detection, as soon as a given browser implements that feature, the new functionality will be unlocked on your website. So you actually make your website future-proof!

This blogpost is the fourth in a series about Modern Web development. We’ll be covering the following topics:

Feature detection using the DOM

Let’s look at an example on how we can do feature detection using the DOM. In this example we have a canvas element on our website. Traditionally you use the user agent string to detect for a given browser, specifically the code sample checks for Internet Explorer version 9 and above.

function DetectCanvas()
{

    var myNav = navigator.userAgent.toLowerCase();

    var version;

 

    // Does the user have Internet Explorer

    if (myNav.indexOf('MSIE') != -1) {

        // Get the browser version number

        version = parseInt(myNav.split('msie')[1]);

        return version
> 8;

    }

    else

        return true;

}

 

if (DetectCanvas())

{

    document.getElementById(myCanvas).style.display = "block";

}

else

{

    // Hide the canvas element in case of IE8 and below

    document.getElementById(myCanvas).style.display = "none";

}

Alternatively, instead of sniffing the user agent string, we can leverage the DOM to test for the availability of the canvas element in a given browser.

In below code sample you’ll notice that we first programmatically create a canvas element. In a second step, we execute the getContext() on the created element. The reason for doing this second step is because in some browser versions, if the element cannot be created, an empty element is still created.

function DetectCanvas()
{

    var canvas = document.createElement('canvas');

    return canvas.getContext ? true : false;

}

So by creating an object programmatically, you can check that a given HTML element is available in a browser.

Feature detection using Modernizr

Alternatively, you can use the Modernizr JavaScript library to perform feature detection. Adapting the example above to use Modernizr would result in the following code:

function DetectCanvas()
{

    return
Modernizr.canvas;

}

Modernizr has an elaborate list of feature detections available, both for HTML5 features as well as for performing CSS3 capabilities. You can find more information in the documentation center.

Conclusion

If you want to make sure your website is future-proof, it’s recommended to remove your browser-detection code and replace it with feature detection. You can leverage libraries such as Modernizr or use simple JavaScript and DOM manipulation otherwise.

Check your website now for compatibility with the Modern Web!
8

Additional resources

For an overview of the 5 things to consider when developing for the modern web, check out our 17-minute video.