JavaScript Feature Detection with has.js

Written by David Walsh on December 3, 2010 · 12 Comments

Dojo Toolkit Project Lead Peter Higgins has been working on an exciting new project called has.js.  Higgins describes this project best:

Browser sniffing and feature inference are flawed techniques for detecting browser support in client side JavaScript. The goal of has.js is to provide a collection of self-contained tests and unified framework around using pure feature detection for whatever library consumes it.

Simply put, has.js tests the browser environment to discover if the browser supports any given feature.  has.js includes a growing number of tests, ranging in many categories, including:

  • EcmaScript 5 features (Object.freeze, Array.map, etc.)
  • CSS features (rgba, border radius, etc.)
  • HTML5 and advanced JavaScript APIs (classList, placeholder attribute, etc.)
  • Script loading features (defer, async)
  • Native JSON, Audio, Video support
  • XHR support
  • ...and more!

Let's explore how to use has.js, its modular test collections, and create custom feature detection tests.

has.js Usage

has.js uses a global has function which you pass a string to test against.  If we wanted to test the presence of a natively supported Array.forEach method, we would code:

// If Array.forEach is not present...
if(!has("array-foreach")) {
	// ... create it!
	Array.prototype.forEach = function() {
		// ....
	};
}

The string passed to the has function represents the test's key as defined when the test was created.  What's a real test creation look like?  Let's review one!

has.js Test Creation

The code behind the Array.forEach test is short and sweet:

(function(has, addtest, cssprop){

	var toString = {}.toString,
		EMPTY_ARRAY = [],
		FUNCTION_CLASS = "[object Function]";

	addtest("array-foreach", function(global, document, anElement){
		return toString.call(EMPTY_ARRAY.forEach) == FUNCTION_CLASS;
	});
})(has, has.add, has.cssprop);

has.js also provides an ES5 Array check which includes other has tests:

(function(has, addtest, cssprop){
	
	addtest("array-es5", function(){
		return has("array-every") && has("array-filter") && has("array-foreach") &&
		has("array-indexof") && has("array-isarray") && has("array-lastindexof") &&
		has("array-map") && has("array-reduce") && has("array-reduceright") &&
		has("array-some");
	});
	
})(has, has.add, has.cssprop);

Simple enough to create tests, right?  Let's create a few of our own!

Custom has.js Test Creation

As you hopefully noticed in the tests above, the test itself is actually a function that returns true if the browser supports a given feature or false if the browser does not.  Let's create a test that tells us if the browser supports RGBA.

addtest("css-rgba", function(g, d, el){
    var re = /^rgba/,
        supported = null;

    if(has("css-enabled")){
      try{
          el.style.color = "rgba(1,1,1,0.5)";
          supported = re.test(el.style.color);
          el.style.color = "";
      }catch(e){}
    }
    return supported;
});

A test may also return null if a test is not applicable to the current browser. For example, browsers other than IE will return null for ActiveX, as ActiveX is an Microsoft-only technology.

Creating has.js modules specific to your project may be the best option if your web application requires many different features. These abstractions may allow you to code your application faster.

has.js is Growing!

has.js is still in its infancy but the utility clearly has a bright future.  The beauty of has.js is that its functionality is extremely useful but the tests themselves are very simple to create.  If you have ideas for more tests or simply improvements to has.js, feel free to fork the project and send pull requests to the main repo.

Comments

  1. Stupid question:
    Why does everyone compare the toString() value of an object to test whether it is a function? I’m referring to the code behind the Array.forEach test.

    Why not
    obj.constructor === Function
    ?

  2. Duncan Krebbers December 3, 2010

    How is this compared with modernizr? It seems a bit equal to me.

    • I want to say that modernizr is more targeted toward CSS. I see modernizr is adding CSS class and such. has.js simply provides a true or falsey value.

    • The ultimate goal with has.js is to embed it in other libraries by way of a customized “builder”, including only tests you want. The hope is that Modernizr would simply be a specific export of various tests, with Modernizr adding in the functionality to do things like add class names to the element etc.

      Paul irish, of Modernizr, is also on the has.js team. The tests are mostly identical between the two. Only the API surface differs.

    • Paul Irish, a maintainer of Modernizr, is also a contributor to has.js. Besides adding the className’s to the documentElement, Modernizr also executes all tests at once, where has.js allows for deferred testing (test when u need it). Modernizr also applies the “HTML5 shim” to allow HTML5 elements to be styleable in older IE.

      There are also differences in what each project considers supported. For example Modernizr will report that input type=range is supported in browsers like Safari 3 despite lacking much of the required HTML5 API.

  3. I’ve been playing around with the Modernizr script which does all testing at once, as mentioned above. I assume you could do the same with has.js? Is there a demo page with running code some where. I’m not sure of what is the intended ‘best way’ to call individual or all test of browser capabilities thru has.js. Is it Dojo like, in that you call individual test modules as needed?

  4. Follow-up: I download the has.js bundle and found the test page at ‘/tests/runTests.html’. Very nice collection of tests. Wish I had this sooner. I would prefer a Dojo style of loading files with something like has.require(‘video’) and so forth. And I’m still a little confused, as I’m still not sure what variable to access for what category of test(s): ie some sort of Dojo style naming convention like ‘has.video.test-name’ might be nice. But the project is still new and from your description, they want to remain ‘generic’, so I will dig around some more for insight.
    Thanks for the post.

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
Smarter Script Loading with LABjs
Newer
WebSocket Update