Detecting for -webkit-apperance with Modernizr

Question

Can anyone tell me how to detect -webkit-appearance, moz-apperance, or appearance using Modernizr?

I have custom selects, and checkboxes that use these and I need to ensure the additional styles are not applied on those browser that dont support these properties.

Thanks

Answer 1

Just use Modernizr.testProp() method:

Modernizr.testProp('webkitAppearance'); 

And with this check you can write your own Modernizr test using Modernizr.addTest():

Modernizr.addTest('webkit-appearance', function() {
    return Modernizr.testProp('webkitAppearance');
});

Answer 2

I'm pretty certain that Modernizr doesn't include a detection routine for this feature yet -- it's just too new.

However, as it's a CSS property, you should be able to detect it fairly simply for yourself without needing to invoke modernizr.

This page details how to do a quick check to detect if a CSS property is available.

Simply check whether the property exists in the style property of any given DOM element. If the property is supported, it will be in the DOM, even if it isn't actually set to anything.

Hope that helps.