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

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

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

使用方法

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

<script src="js/feature.js"></script>
  

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

if (feature.webGL) {
  console.log("你的浏览器支持WebGL");
} else {
  console.log("你的浏览器不支持WebGL");
}    
  

如果你希望像Modernizr那样当浏览器支持某些特性时,在<html>元素上添加相应的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

Feature.js浏览器特性检测插件的github地址为:https://github.com/viljamis/feature.js