Cutting The Mustard

Mustard-testing in Javascript is currently the best approach to feature detection and responsive enhancement.

Cutting The Mustard not only allows us to provide a core experience that works for every browser and device, but also deliver an enhanced one if specific features are supported. It helps us develop faster JavaScript solutions that use native implementations of features we commonly need.

It also allows us to avoid feature detection libraries such as Respond.js and Modernizr, since a tailor-made detection only requires a snippet of code. Here are some of the methods by which we can integrate this logic.

Original BBC method

The BBC’s method was used to determine whether or not the browser is HTML4 or HTML5 ready. By checking API support for querySelector, localStorage and addEventListener, browsers can effectively be split into two groups.

if ('querySelector' in document
	&& 'localStorage' in window
	&& 'addEventListener' in window) {
	// Cuts the mustard
}

Mustard with additional APIs and forEach

Taking the above method a step further, we can add additional checks for more modern Javascript API enhancements, such as classList. If the logic is passed, a class can be added to the HTML element, much like how Modernizr handles feature detection.

if ('querySelector' in document 
	&& 'addEventListener' in window
	&& 'localStorage' in window
	&& 'classList' in document.documentElement
	&& Array.prototype.forEach) {
	// Cuts the mustard
  document.documentElement.className += 'js';
}

Boolean method

Chris Ferdinandi of Go Make Things wrote a different mustard logic on his Ditching jQuery article.

var supports = !!document.querySelector && !!window.addEventListener;
if ( !supports ) return;

To quote from the article: The !! converts the API method into a boolean value that you can test against. You can (and should) add all of the APIs you need to test against to this list. The !supports if statement stops running the script of the browser doesn’t support the appropriate APIs.

Alternative return method

With no-js already a class on the HTML element, we can switch the class to js if features are supported, else return and do nothing.

if (!document.querySelector && !window.addEventListener) {
	return;
} else {
	// Cuts the mustard
	document.documentElement.className = 'js';
}

Cutting The Mustard as a function

Another method would be to instantiate a function, and use a true/false logic. Different groups of mustard tests could be set up this way.

var cutsTheMustard = function() {
	if (document.querySelector && window.addEventListener) {
		return true;
	} else {
		return false;
	}
};

We could then apply this function as a check elsewhere, and add our enhanced classes and scripts if cutsTheMustard is true.

if (cutsTheMustard() === true) {
	document.documentElement.className += ' cutsthemustard';
	...
}

Keep it progressive

These are just some of the ways we can create a simple mustard test in Javascript. It will not only prevent the browser from throwing an error and not parsing the file, but also help us to rely less on bloated libraries to deliver the same logic. It’s just faster. We should worry less about legacy browsers, and concentrate on the enhanced features that most modern browsers can handle.

To read more on progressive enhancement and see a great case study on mustard-cutting applied to off-canvas navigation, check out Jeremy Keith’s Responsive Enhancement article on 24ways.org

By Christian Miller  |  Follow me on Twitter