adam-lynch / simple-feature-detector
A very lightweight dependency-free feature-detector
Installs: 23
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 3
Forks: 0
Open Issues: 2
Language:JavaScript
This package is not auto-updated.
Last update: 2024-11-04 15:16:57 UTC
README
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).
Usage
-
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 globalSimpleFeatureDetector
function. See the examples for an example of each. -
Declare support for a feature
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
- WebKitall
- All of the above""
- return false if not supported natively
The result: <html class="has-column-width">...</html>
- 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 totrue
)
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.
* You wouldn't want to check for a vendor+property combination when it never existed (like o-border-radius
), among other possible reasons.