Feature.js 1.0.1 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();

Download (v1.0.1)
or
View Source on GitHub