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

Download / get from: npm, bower or packagist.
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.
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 - WebKit
all - 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 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.

* You wouldn't want to check for a vendor+property combination when it never existed (like o-border-radius), among other possible reasons.

adam-lynch / simple-feature-detector

Maintainers

Details

README

Usage

Browser support