Granular Feature Detection for Browsers


Feature-detection at a highly targeted level.

Modernizr is wonderful, no doubt about it. It is however, pretty massive and while it can be whittled down to a smaller size using customization from the download page, I'm just a bit too lazy for that.

By leveraging Browserify's excellent static analysis (powered by esprima), when feature is used within an application in a selective way, only the targeted feature detection is included in the resultant JS file.

So if I was to write the following require:

var fullscreen = require('feature/fullscreen');

Then only the fullscreen code from feature would be included in my application. All the rest of the module would simply be ignored. So that's why. It's purely selfish, and well you should feel free to keep on using Modernizr.

Test for the prescence of the specified CSS property (in all it's possible browser prefixed variants). The returned function (if we are able to access the required style property) is both a getter and setter function for when given an element.

Consider the following example, with regards to CSS transforms:

var transform = require('feature/css')('transform');
var crel = require('crel');
var el = crel('div', 'test');
// if we have transforms available, then apply one 
if (transform) {
  transform(el, 'translate(500px, 100px)');
// add the test div to the document 
// log out the el position 
// ~~> 508 

The core functionality of the feature module is powered by the detect function, which can be imported like so:

var detect = require('feature/detect');

Once you have the detect function available you can do nifty things like detect whether your browser supports requestAnimationFrame:

var raf = require('feature/detect')('requestAnimationFrame');
function logRandom() {
// create a requestAnimationFrame fallback 
raf = raf || function(fn) {
  setTimeout(fn, 1000 / 60);
// start logging random numbers (for some reason...) 

If it does then raf will be a function that is equivalent to the browser prefixed requestAnimationFrame function (e.g. webkitRequestAnimationFrame). It should be noted that feature does nothing to try and polyfill things that don't exist, that is left to you to implement yourself.

If the Fullscreen API is available this will allow you to fullscreen either the document or a target element.

var fullscreen = require('feature/fullscreen');
if (fullscreen) {

Additionally, the function can be passed directly to an event handler and the function will fullscreen just the selected element. This is useful in the case of videos, images, etc.

var fullscreen = require('feature/fullscreen');
var crel = require('crel');
var img = crel('img', {
  src: 'http://upload.wikimedia.org/wikipedia/commons/d/d3/Jim_jim_falls.jpg',
img.addEventListener('click', fullscreen);