-1

I am trying to display a filter on an image based on browser support.

How do I check if the browser supports a specific CSS property like filter and --webkit-filter using javascript?

I am using the following function but its not working

 isCSSStyleSupported: function(prop, value) {
            // If no value is supplied, use "inherit"
            value = arguments.length === 2 ? value : 'inherit';
            // Try the native standard method first
            if ('CSS' in window && 'supports' in window.CSS) {
                return window.CSS.supports(prop, value);
            }
            // Check Opera's native method
            if('supportsCSS' in window){
                return window.supportsCSS(prop, value);
            }
            // Convert to camel-case for DOM interactions
            var camel = prop.replace(/-([a-z]|[0-9])/ig, function(all, letter) {
                return (letter + '').toUpperCase();
            });
            // Check if the property is supported
            var support = (camel in el.style);
            // Create test element
            var el = document.createElement('div');
            // Assign the property and value to invoke
            // the CSS interpreter
            el.style.cssText = prop + ':' + value;
            // Ensure both the property and value are
            // supported and return
            return support && (el.style[camel] !== '');
        },
Chris Hansen
  • 7,813
  • 15
  • 81
  • 165
  • 1
    Possible duplicate of [check browser css property support](http://stackoverflow.com/questions/1342994/check-browser-css-property-support) – Robert Jul 13 '16 at 15:30

1 Answers1

0

You may take a look at CSS.supports which return true or false

var doSupport = CSS.supports('some CSS property', 'value');

But there is a catch. IE does not support this feature

Alternatively you can also explore modernizr which comes a plugin

brk
  • 48,835
  • 10
  • 56
  • 78