Hi devs!

I will discuss in this post a technique today's web developers should all use for the web applications they build: the browser feature detection. A major concern for every web developers is the browser compatibility of their application. How will the web pages be rendered? How will the JavaScript be interpreted? Will the behaviors be consistent across different browsers?

The major browsers each have their own rendering and JavaScript implementation. This obviously causes inconsistency that developers have to deal with. To do so, a simple way is to check what the currently used browser is. This could be done by checking the user agent property of the navigator object.  

Testing if current browser is IE

<script type="text/javascript"> 
  if (navigator.userAgent.indexOf("MSIE") > 0) { 
   // Run IE specific code 
  } 
</script>

This technique can work but has a major drawback. The developer must know every browser, every versions and how the features are handled in each of them. You can visit the website http://caniuse.com to check the support of a specific feature in a specific version of a browser . Instead of implmenting main and fallback solutions for each browser and each browser version, another more reliable approach is to detect the proper handling of a specific feature before making use of it.  

Testing the event subscribing method

<script type="text/javascript"> 
  if (window.addEventListener) { 
      window.addEventListener("load", myCallback, false); 
  } else if (window.attachEvent) { 
      window.attachEvent("onload", myCallback); 
  } 
</script> 

A good technique is to implement a set of functions that will encapsulate the feature detection. Some cross-browser libraries such as JQuery could also be used.

Custom cross-browser subscribeToEvent()

[code language="javascript"]

<a id="clickme">CLICK ME</a>
<script type="text/javascript">
  function subscribeToEvent(eventIssuer, eventType, callback) { 
    if (eventIssuer.addEventListener) { 
      eventIssuer.addEventListener(eventType, callback, false); 
    } else if (eventIssuer.attachEvent) { 
      eventIssuer.attachEvent("on"+eventType, callback); 
    } 
  } 
  var clickme = document.getElementById("clickme"); 
  subscribeToEvent(clickme,"click", function() { 
    alert("you clicked me"); 
  }); 
</script> 

 Use JQuery library

[code language="javascript"]

<a id="clickme">CLICK ME</a> 
<script type="text/javascript"> 
  $("#clickme").on("click", function() { 
    alert("you clicked me"); 
  }); 
  // Or use the specific click function 
  // $("#clickme").click(function() { alert("you clicked me"); }); 
</script>

For HTML5/CSS3, we can use the library Modernizr (http://modernizr.com) which purpose is to detect the support of a specific feature in the current browser.

A sample of feature detection with Modernizr

<script type="text/javascript"> 
  if (Modernizr.canvas) { 
    // code that uses HTML5 canvas 
  } 
</script>

I hope this post will encourage you to make cross-browsers solutions more efficiently by detecting features and you enjoyed reading it.

Kind Regards,

Yannick