Simple Feature Detector
![Bower version][bower-image] ![NPM version][npm-image] ![Build Status][travis-image] ![Windows Build Status][appveyor-image], (*1)
A very lightweight (847 bytes gzipped) dependency-free module to easily detect CSS features in the browser (and declare their support adding CSS classes to the HTML element)., (*2)
Usage
-
Download / get from: npm, bower or packagist., (*3)
-
Usage: UMD is supported so you can use this with AMDs / RequireJS, commonjs / browserify, or simply by sticking the <script> in your HTML and use the global SimpleFeatureDetector function. See the examples for an example of each., (*4)
-
Declare support for a feature, (*5)
SimpleFeatureDetector.supports({ property: 'column-width', vendors: 'wg' });
Each object contains the CSS property desired and the vendors which it should check for*, if it's not supported natively.
Possible values:
* g - Gecko (Firefox)
* k - KHTML (Konqueror)
* p - Presto (Opera)
* t - Trident (IE)
* w - WebKit
* all - All of the above
* "" - return false if not supported natively, (*6)
The result: <html class="has-column-width">...</html>, (*7)
- Check support for multiple features
SimpleFeatureDetector.supports([
{ property: 'column-width', vendors: 'wg' },
{ property: 'border-radius', vendors: 'all' },
{ property: 'transform-style', vendors: '' } //will check for native support only
]);
- To simply determine if a feature is supported without adding classes to the DOM, use the second parameter
declareSupport (which defaults to true)
if(SimpleFeatureDetector.supports( { property: 'column-width', vendors: 'wg' }, false )){
alert('Yes!');
}
- Caching: There is none. Use this wisely :)
Browser support
You'll be fine. Tested as far back as Internet Explorer 8., (*8)
* You wouldn't want to check for a vendor+property combination when it never existed (like o-border-radius), among other possible reasons., (*9)
Wallogit.com
