浏览器功能特性支持情况检测JS库:feature.js

jopen 3年前

Feature.js

Feature.js是一个快速,简单和轻量级的浏览器功能特性检测库。只有1kb,没有任何依赖。在页面初始化的时候自动加载。

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 Modernizr does when something is supported, that’s simple:

if (feature.webGL) {    document.documentElement.className += " webgl";  }

If you’re using jQuery, it’s even more simple:

if (feature.webGL) {    $("html").addClass("webgl");  }

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 touch screen 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 the needed 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 browser feature tests and how to call them.

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

Live demo

项目地址: https://github.com/viljamis/feature.js