思享工具箱

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

摘要：
特色js是一个轻量级的浏览器功能检测JavaScript库插件。通过Feature Js，您可以检查客户端浏览器是否支持某些功能，并为这些功能编写代码。特色当页面初始化时，Js将自动加载，但在您在代码中调用它之前，它不会自动执行功能检测。WebGLorSVGisn'tsupported“）；return；｝console.log；｝）（） ; API参考以下是该功能的功能列表。js可以执行浏览器检测。feature.asyncfeature.addEventListener feature.canvasfeature.classListfeature.corsfeature.text菜单功能.css3Dtransformfeature.cssTransformfeature.css转换功能.deferfeature.deviceMotionfeature.deviceOrientationfeature.geolocationfeature.historyAPIfeature.placeholderfeature.localStoragefeature.matchMediafeature.pictureElementfeature.querySelectorAllfeature.remUnitfeature。serviceWorkerfea功能。尺寸特征.srcsetfeature.svgfeature.touchfeature.viewportUnitfeature.webGLFeature。js浏览器功能检测插件的github地址为：https://github.com/viljamis/feature.js附上源代码：/*！

简要教程

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

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

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

Feature.js-轻量级浏览器特性检测JavaScript库插件第1张

查看演示       下载插件

使用方法

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

<script src="http://t.zoukankan.com/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

附源码：

/*!
  * FEATURE.JS 1.0.1, 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 : !!(/(Androids(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
  */
 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
  */
  
 var 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
 cssTransition : (function() {
 var test = util.pfx("transition") !== null;
 return !!test;
 })(),
  
 // Test if addEventListener is supported
 addEventListener : !!window.addEventListener,
  
 // Test if querySelectorAll is supported
 querySelectorAll : !!document.querySelectorAll,
  
 // Test if matchMedia is supported
 matchMedia : !!window.matchMedia,
  
 // Test if Device Motion is supported
 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" in docEl),
  
 // Test if placeholder attribute is supported
 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 : 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
  */
 window.feature = Feature;
  
 }(window, document));

标签：#test#webgl#轻量级#placeholder | 浏览：175 | 发布日期：

免责声明：文章转载自《Feature.js-轻量级浏览器特性检测JavaScript库插件》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇MySQL 实现row_number() 分组排序功能Mysql—二进制日志(binlog)下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

synchronized实现原理及锁优化

1.引言 并发编程中synchronized是重量级锁，但随着JVM1.6对synchronized进行优化后，有些情况下它并不那么重，本文介绍了Java SE1.6中为了减少获得锁和释放锁带来的性能消耗而引入的偏向锁和轻量级锁，以及锁的存储结构和升级过程。 2.术语定义 CAS(Compare and Swap):比较并交换。用于在硬件层面上提供原子性操...

Vue template 报错 Type expected.Vetur(1110)

解决方案： 1. 文件名称中不要含Test 2.可以复制正常文件，再改名字 排查步骤如下： 1. 按其他博客写的去设置了vetur.validation.template false，切换到问题vue文件，还是报错； 2. 尝试将没报错的文件内容复制过来，依然报错； 3.内容后，输入<template,选择default.vue 模板，依然报错；...

(转)使用CruiseControl+SVN+ANT实现持续集成之二

1. 环境搭建1.1. 下载及目录介绍 从官方站点http://cruisecontrol.sourceforge.net/download.html下载一份最新的 CC 压缩包，最新的版本号为2.8.4 下载了cruisecontrol-bin-2.8.4.zip 直接解压到E盘下，文件结构如下图： apache-ant-1.7.0：CC中使用...

以神经网络使用为例的Matlab和Android混合编程

由于需要在一个Android项目中使用神经网络，而经过测试发现几个Github上开源项目的训练效果就是不如Matlab的工具箱好，所以就想在Android上使用Matlab神经网络代码（可是。。。） 这个问题大概处理了两天，原本预计5个小时的。。。 过程遇到了诸多一手坑以及看到相关资料的对新手不友好，所以就把过程记录下来希望能给后来者一些帮助 这个教程从0...

bootstrap基础（二）

表单 一、基础表单 表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。 二、水平表单 在<form>元素上使用类名“form-horizontal” <form class="form-horizontal" role="form"> <div class="form-group">...

ORACLE检查找出损坏索引(Corrupt Indexes)的方法详解

ORACLE检查找出损坏索引(Corrupt Indexes)的方法详解 潇湘隐者 2020-12-17我要评论 这篇文章主要给大家介绍了关于ORACLE如何检查找出损坏索引(Corrupt Indexes)的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧 索引 索引与表一样，也属于段（segment）的...

最新文章

随机推荐

思享工具箱导航