What is it
Feature.js is a fast, simple and lightweight browser feature detection library. It has no dependencies and weighs only 1kb minified and gzipped. Feature.js automatically initializes itself on page load, so you don’t have to. It doesn’t, however, run any tests while initializing, so it will only ever run them when you ask it to. This makes it perform very fast.
With Feature.js, it’s simple to build progressively enhanced experiences that use feature detection to determine if a code can be executed in the user’s browser.
How to use
First, include the script somewhere on your page — usually either in the <head> or just before the </body> closing tag. No need to initialize or do anything else really, all the feature tests are now available for usage:
if (feature.webGL) { console.log("WebGL supported"); } else { console.log("WebGL not supported"); }
If you want to add a class to the <html> element like Modernizrdoes when something is supported, that’s simple:
if (feature.webGL) { document.documentElement.className += " webgl"; }
Feature.js also provides an easy way to run all the tests at once and automatically add these classes:
feature.testAll();
Combining multiple feature tests is possible too, you can just write an if statement like:
if (feature.canvas && feature.webGL) { console.log("Canvas and WebGL are supported") }
When you want to target JavaScript only towards browsers that support the features you need, you can check inside a function if the tests return false and stop further execution:
(function() { if (!feature.webGL || !feature.svg) { console.log("Stopping… WebGL or SVG isn’t supported"); return; } console.log("Browser supports both WebGL & SVG"); })();
Gotchas
There are few gotchas related to browser feature detection in general and these things are good to keep in mind when using the Feature.js library.
TOUCH: Feature.js tries to detect if touch events are supported, but this doesn’t necessarily reflect a touchscreen device. Sometimes you might get a false positive on a device that doesn’t really have touchscreen since it’s virtually impossible nowadays to detect this accurately. For 95-98% of the time this test should be correct though, but you should always keep this in mind when using this detection.
CSS 3D TRANSFORMS: Current implementation might give false positive on some older Android stock WebKits in very rare cases.This issue is currently being tracked and will be addressed in the future releases if needed.
DEVICE MOTION/ORIENTATION: Keep in mind that many desktop browsers support these event listeners, and will hence give a positive result even though the device might not have theneeded sensors.
PLACEHOLDERS: Feature.js gives false negative for iOS 3 Safari, but since this OS has basically no users, it’s not considered an issue at the moment.
API reference
Below you’ll find a list of all the available feature tests and how to call them. Feature.js has also one public method, testAll, that runs all the tests and adds the supported ones as classes to the<html> element.
feature.async feature.addEventListener feature.canvas feature.classList feature.cors feature.contextMenu feature.css3Dtransform feature.cssTransform feature.cssTransition feature.defer feature.deviceMotion feature.deviceOrientation feature.geolocation feature.historyAPI feature.placeholder feature.localStorage feature.matchMedia feature.pictureElement feature.querySelectorAll feature.remUnit feature.serviceWorker feature.sizes feature.srcset feature.svg feature.touch feature.viewportUnit feature.webGL
feature.testAll();