Modern Web: Avoiding Browser Detection


Der findes en række online værktøjer til at hjælpe med at udvikle bedre sites. Der er validators så som W3C’s Markup og CSS validators. Test af hastighed med Google PageSpeed eller Yslow. Microsoft har nu frigivet nogle værktøjer, der hjælper med at kontrollere kompatibilitet på tværs af browsers (Chrome, Safari, Firefox, IE, Edge…).

Test site kompatibilitet med Site Scan, som analyserer, om et site virker lige godt i alle browsere og for manglende ARIA tags osv.

Ud over Site Scan er der følgende andre gratis værktøjer på dev.microsoftedge.com

Efter at have analyseret millioner af sites er der fem områder, hvor rigtig mange sites fejler. Disse fem områder har vi sammen med bl.a. Microsoft Benelux adresseret med en video og en række blogposts om Modern Web Development.

Avoiding Browser Detection

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!

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!


Additional resources

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

Comments (0)

Skip to main content