html 测量插件,Feature.js-轻量级浏览器特性检测JavaScript库插件

Feature.js是一款轻量级的浏览器特性检测JavaScript库插件。该插件运行速度快，使用简单，文件只有1kb大小。通过Feature.js你可以检测客户浏览器是否支持某些特性，并针对这些特性编写代码。

Feature.js会自动在页面初始化时进行加载，但是它不会自动进行特性检测，直到你在代码中调用它时才会进行指定特性的检测。

通过Feature.js你可以对浏览器进行特性检测，例如检测浏览器是否支持CSS 3D transforms，为支持该特性的浏览器编写代码来操纵元素进行3D转换，在不支持该特性的浏览器中可以执行其他的操作。

使用方法

首先你需要在页面中引入feature.js文件，你不需要对其进行初始化，只需引入文件即可。

接着你就可以使用特性检测来检测浏览器是否支持某些特性，例如：

if (feature.webGL) {

console.log("你的浏览器支持WebGL");

} else {

console.log("你的浏览器不支持WebGL");

}

如果你希望像Modernizr那样当浏览器支持某些特性时，在元素上添加相应的class，可以像下面这样操作：

if (feature.webGL) {

document.documentElement.className += " webgl";

}

如果你使用jquery，那操作就更简单了：

if (feature.webGL) {

$("html").addClass("webgl");

}

你也可以同时进行多选特性的检测：

if (feature.canvas && feature.webGL) {

console.log("你的浏览器支持Canvas和WebGL")

}

如果你的JavaScript代码只有在浏览器支持某些特性时才有意义，那么你可以在一个函数中检测这些特性，如果浏览器不支持这些特性，直接返回，否则才执行相应的JS代码。

(function() {

if (!feature.webGL || !feature.svg) {

console.log("Stopping… WebGL or SVG isn’t supported");

return;

}

console.log("Browser supports both WebGL & SVG");

})();

API reference

下面是Feature.js可进行的浏览器检测的特性列表。

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