feature

Feature-detection at a highly targeted level.

What about Modernizr?

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:

1var 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.

Reference

css(prop)

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:

1var transform = require('feature/css')('transform');
2var crel = require('crel');
3var el = crel('div', 'test');
4
5// if we have transforms available, then apply one
6if (transform) {
7  transform(el, 'translate(500px, 100px)');
8}
9
10// add the test div to the document
11document.body.appendChild(el);
12
13// log out the el position
14console.log(el.getBoundingClientRect().left);
15// ~~> 508

detect

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

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

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

1var raf = require('feature/detect')('requestAnimationFrame');
2
3function logRandom() {
4  console.log(Math.random());
5  raf(logRandom);
6}
7
8// create a requestAnimationFrame fallback
9raf = raf || function(fn) {
10  setTimeout(fn, 1000 / 60);
11};
12
13// start logging random numbers (for some reason...)
14logRandom();

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.

fullscreen

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

1var fullscreen = require('feature/fullscreen');
2
3if (fullscreen) {
4  fullscreen();
5}

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.

1var fullscreen = require('feature/fullscreen');
2var crel = require('crel');
3var img = crel('img', {
4  src: 'http://upload.wikimedia.org/wikipedia/commons/d/d3/Jim_jim_falls.jpg',
5});
6
7img.addEventListener('click', fullscreen);
8
9document.body.appendChild(img);
10

License(s)

ISC

Copyright (c) 2016, Damon Oehlman damon.oehlman@gmail.com

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.