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
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 oneif transformtransformel 'translate(500px, 100px)';// add the test div to the documentdocumentbodyappendChildel;// log out the el positionconsole.logelgetBoundingClientRectleft;// ~~> 508
The core functionality of the feature module is powered by the
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
var raf = require'feature/detect''requestAnimationFrame';console.logMathrandom;raflogRandom;// create a requestAnimationFrame fallbackraf = raf ||setTimeoutfn 1000 / 60;;// start logging random numbers (for some reason...)logRandom;
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 fullscreenfullscreen;
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: '';imgaddEventListener'click' fullscreen;documentbodyappendChildimg;