转载：轻量级浏览器特性检测库：feature.js

feature.js是一个很简单、快速和轻量级的浏览器特性检测库，它没有任何依赖，体积压缩最后只有1KB，它可以自动初始化，在你需要知道某个特性是否可用时，直接引入即可。以下中文为个人理解。

/*!
* FEATURE.JS 1.0.0, A Fast, simple and lightweight browser feature
* detection library in just 1kb.
*
* http://featurejs.com
*
* CSS 3D Transform, CSS Transform, CSS Transition, Canvas, SVG,
* addEventListener, querySelectorAll, matchMedia, classList API,
* placeholder, localStorage, History API, Viewport Units, REM Units,
* CORS, WebGL, Service Worker, Context Menu, Geolocation,
* Device Motion, Device Orientation, Touch, Async, Defer,
* Srcset, Sizes & Picture Element.
*
*
* USAGE EXAMPLE:
* if (feature.webGL) {
* console.log("webGL supported!");
* }
*
* Author: @viljamis, https://viljamis.com
*//* globals DocumentTouch */
;(function (window, document, undefined) {
"use strict"; // For minification only
var docEl = document.documentElement; /**
* Utilities
*/
var util = { /**
* Simple create element method
*/
create : function(el) {
return document.createElement(el);
}, /**
* Test if it's an old device that we want to filter out
*/
old : !!(/(Android\s(1.|2.))|(Silk\/1.)/i.test(navigator.userAgent)), /**
* Function that takes a standard CSS property name as a parameter and
* returns it's prefixed version valid for current browser it runs in
* 返回当前的css属性是否当前运行的浏览器，例如一个css属性transition，这个函数会遍历
* dummy.style['transition']/dummy.style["WebkitTransition"]/dummy.style["MozTransition"]/dummy.style["OTransition"]/dummy.style["msTransition"]
* 的值是否为true，是则返回该值
*/
pfx : (function() {
var style = document.createElement("dummy").style;
var prefixes = ["Webkit", "Moz", "O", "ms"];
var memory = {};
return function(prop) {
if (typeof memory[prop] === "undefined") {
var ucProp = prop.charAt(0).toUpperCase() + prop.substr(1),
props = (prop + " " + prefixes.join(ucProp + " ") + ucProp).split(" ");
memory[prop] = null;
for (var i in props) {
if (style[props[i]] !== undefined) {
memory[prop] = props[i];
break;
}
}
}
return memory[prop];
};
})() }; /**
* The Feature.js object
*
* @constructor
*/
function Feature() {} Feature.prototype = {
constructor : Feature, // Test if CSS 3D transforms are supported
css3Dtransform : (function() {
var test = (!util.old && util.pfx("perspective") !== null);
return !!test;
})(), // Test if CSS transforms are supported
cssTransform : (function() {
var test = (!util.old && util.pfx("transformOrigin") !== null);
return !!test;
})(), // Test if CSS transitions are supported
// 检测css transition属性是否支持
cssTransition : (function() {
var test = util.pfx("transition") !== null;
return !!test;
})(), // Test if addEventListener is supported
// 检测 addEventListener是否支持
addEventListener : !!window.addEventListener, // Test if querySelectorAll is supported
// 检测querySelectorAll是否支持
querySelectorAll : !!document.querySelectorAll, // Test if matchMedia is supported
// 检测媒体查询(media）是否支持
matchMedia : !!window.matchMedia, // Test if Device Motion is supported
// 检测device Motion是否支持
deviceMotion : ("DeviceMotionEvent" in window), // Test if Device Orientation is supported
deviceOrientation : ("DeviceOrientationEvent" in window), // Test if Context Menu is supported
contextMenu : ("contextMenu" in docEl && "HTMLMenuItemElement" in window), // Test if classList API is supported
// 检测classList是否支持
classList : ("classList" in docEl), // Test if placeholder attribute is supported
// 检测placeholder是否支持
placeholder : ("placeholder" in util.create("input")), // Test if localStorage is supported
localStorage : (function() {
var test = "x";
try {
localStorage.setItem(test, test);
localStorage.removeItem(test);
return true;
} catch(err) {
return false;
}
})(), // Test if History API is supported
historyAPI : (window.history && "pushState" in window.history), // Test if ServiceWorkers are supported
serviceWorker : ("serviceWorker" in navigator), // Test if viewport units are supported
viewportUnit : (function(el) {
try {
el.style.width = "1vw";
var test = el.style.width !== "";
return !!test;
} catch(err) {
return false;
}
})(util.create("dummy")), // Test if REM units are supported
remUnit : (function(el) {
try {
el.style.width = "1rem";
var test = el.style.width !== "";
return !!test;
} catch(err) {
return false;
}
})(util.create("dummy")), // Test if Canvas is supported
canvas : (function(el) {
return !!(el.getContext && el.getContext("2d"));
})(util.create("canvas")), // Test if SVG is supported
svg : !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect, // Test if WebGL is supported
webGL : (function(el) {
try {
return !!(window.WebGLRenderingContext && (el.getContext("webgl") || el.getContext("experimental-webgl")));
} catch(err) {
return false;
}
})(util.create("canvas")), // Test if cors is supported
cors : ("XMLHttpRequest" in window && "withCredentials" in new XMLHttpRequest()), // Tests if touch events are supported, but doesn't necessarily reflect a touchscreen device
touch : !!(("ontouchstart" in window) || window.navigator && window.navigator.msPointerEnabled && window.MSGesture || window.DocumentTouch && document instanceof DocumentTouch), // Test if async attribute is supported
async : ("async" in util.create("script")), // Test if defer attribute is supported
defer : ("defer" in util.create("script")), // Test if Geolocation is supported
geolocation : ("geolocation" in navigator), // Test if img srcset attribute is supported
srcset : ("srcset" in util.create("img")), // Test if img sizes attribute is supported
sizes : ("sizes" in util.create("img")), // Test if Picture element is supported
pictureElement : ("HTMLPictureElement" in window), // Run all the tests and add supported classes
//查找在该对象中所有不是testAll、不是对象引用并且结果为true的方法，存进classes,最后输出来
testAll : function() {
var classes = " js";
for (var test in this) {
if (test !== "testAll" && test !== "constructor" && this[test]) {
classes += " " + test;
}
}
docEl.className += classes.toLowerCase();
} }; /**
* Expose a public-facing API
*/
function expose() {
var ftr = new Feature();
return ftr;
}
window.feature = expose();}(window, document));

总体只有1KB，可以快速检测当前浏览器是否支持css3的特性。

使用方法：

if (feature.webGL) {
console.log("WebGL supported");
} else {
console.log("WebGL not supported");
}

属性列表：

Below you’ll find a list of all the available browser feature tests and how to call them.

演示：

• Official site with live tests: http://featurejs.com
• Test with actual features: http://featurejs.com/test