Starting with the introduction of vendor prefixes, detecting the support of a particular CSS property has become more complicated. Indeed, you need to test more values to check if the browser supports that CSS rule.

Hopefully, some amazing tools have been built since then. One of the most popular is Modernizr. Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. And it does a great job.

However, most of the times you only need to get the (un)prefixed name of one particular property, for instance the transform one. So, loading the whole Modernizr build (or event the custom build) feels a bit exaggerated for a single test.

In order to check the support of a css property (and save some bytes without loading Modernizr) you can use this simple function:

// Detect css support, thanks Modernizr
function cssTest (prop) {
  var ucProp  = prop.charAt(0).toUpperCase() + prop.slice(1),
      el = document.createElement( 'test' ),
      props   = (prop + ' ' + ['Webkit','Moz','O','ms'].join(ucProp + ' ') + ucProp).split(' ');

  for ( var i in props ) {
    if ([ props[i] ] !== undefined ) { return props[i]; }
  return false;

This function will create a dummy element and it will check the default value of these (un)prefixed properties. The first one that is not undefined will be returned (or false if no one is available).

var cssTransform = cssTest('transform');
// now cssTransform is MozTransform if FF, msTransform if IE9+, ...

if(cssTransform) { // it's false in IE8-[cssTransform] = 'scale(0.5)';

Obviously, this function expects the right input to work. If you need to detect some more complex properties (like flexbox), I would suggest you to check out the Modernizr source code because there are quirks and implementation bugs to be aware of.