I’ve already talked about how to detect the supported CSS property with Javascript. Now, I’d like to explain you how to detect if a browser supports a specific CSS property value.

As I’ve said on the other post, these methods are simple and they are not intended to substitute tools like Modernizr that are great for broader feature detection.

Solution for prefixed values

I’ve done two implementations of this feature-detect function. This first one will simply return any of the (un)prefixed values that the browser supports (or an empty string).

function featureTest( property, value, noPrefixes ) {
  // Thanks Modernizr!
  var prop = property + ':',
      el = document.createElement( 'test' ),
      mStyle = el.style;
  
  if( !noPrefixes ) {
      mStyle.cssText = prop + [ '-webkit-', '-moz-', '-ms-', '-o-', '' ].join( value + ';' + prop ) + value + ';';
  } else {
      mStyle.cssText = prop + value;
  }    
  return mStyle[ property ];
}

For instance, to check if the browser supports position: sticky:

var supportsSticky = !!featureTest('position', 'sticky');
// true on Safari and false everywhere else

Solution for different values

This second implementation is useful if the property value is different for each browser.

function featureTest( property, values ) {
  var prop = property + ':',
      el = document.createElement( 'test' ),
      mStyle = el.style, index;
      
  for (var i = 0; i < values.length; i++) {
      mStyle.cssText = prop + values.join(';' + prop) + ';';
  }
  
  return mStyle[ property ];
}

For instance, to check the support of image-rendering:

featureTest('image-rendering', ['-moz-crisp-edges','-webkit-optimize-contrast','crisp-edges','pixelated'])