Feature.js 1.1.0 is released!

Dismiss

Feature.js, a feature detection library in 1kb

A Fast, simple and lightweight browser feature detection library written in plain JavaScript. Try it by opening this page in different browsers and seeing the results:

  • Please enable JavaScript to see the feature test results.

What is it

Feature.js is a fast, simple and light­weight browser feature detec­tion library. It has no dependencies and weighs only 1kb minified and gzipped. Feature.js automati­cally initia­lizes itself on page load, so you don’t have to. It doesn’t, however, run any tests while ini­tia­lizing, 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 progres­sively enhanced expe­riences that use feature detection to determine if a code can be execu­ted in the user’s browser.

How to use

First, include the script some­where 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 Modernizr does when some­thing 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 state­ment 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) {
    throw new Error("WebGL or SVG isn’t supported");
  }
  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 neces­sarily reflect a touch­screen device. Some­times 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 imple­men­tation might give false positive on some older Android stock WebKits in very rare cases. This issue is cur­rently being tracked and will be addres­sed in the future releases if needed.

Device Motion/­Orientation: Keep in mind that many desk­top browsers sup­port these event listeners, and will hence give a positive result even though the device might not have the needed sensors.

Placeholders: Feature.js gives false negative for iOS 3 Safari, but since this OS has basically no users, it’s not consi­dered 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 suppor­ted 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();

Extending

Feature.js allows you to extend the library with your own tests or customize the existing tests by using the provided extend method:

feature.extend(NAME, CALLBACK);

This way you can add your own tests to the library, the result of which will also be integrated with the testAll() method. A simplified example looks like this:

feature.extend("foo", function() {
  return true;
});

feature.testAll();

The above example would add the foo class to the html element as well.

Utilities

feature.extend graciously exposes the utility methods to your callback. These utilities are used internally within the library and will help unify your added tests:

feature.extend("foo", function(util) {
  // Simple create element method
  util.create("image"); // returns HTMLElement

  // Test if it’s an old device we want to filter out
  util.old; // returns Boolean

  // Takes standard CSS property as a parameter and returns
  // its prefixed version valid for the current browser
  util.pfx("transition"); // returns Boolean
});

Download (v1.0.1)
or
View Source on GitHub