cssdetector.js

/*
  Usage:
    if (CssDetector.supports('box-shadow')) {
      // load 'standard-box-shadows.css'
    } else if (CssDetector.supports('-moz-box-shadow')) {
      // load 'mozilla-box-shadows.css'
    } else if (CssDetector.supports('-webkit-box-shadow')) {
      // load 'webkit-box-shadows.css'
    } else {
      // load 'fake-box-shadows.css'
    }
*/
CssDetector = {
  div: $('<div>'),
  properties: {
    'background': {
      property: 'background',
      value:    'red'
    },
    'box-shadow': {
      property: 'box-shadow',
      value:    "4px 4px 15px rgba(0,0,0,0.7)"
    },
    '-moz-box-shadow': {
      property: '-moz-box-shadow',
      value:    "rgba(0, 0, 0, 0.7) 4px 4px 15px 0px"
    },
    '-webkit-box-shadow': {
      property: '-webkit-box-shadow',
      value:    "4px 4px 15px rgba(0,0,0,0.7)"
    },
    'border-radius': {
      property: 'border-radius',
      value:    "12px"
    },
    '-webkit-border-radius': {
      property: '-webkit-border-top-left-radius',
      value:    "12px"
    },
    '-moz-border-radius': {
      property: '-moz-border-radius-topleft',
      value:    "12px"
    }
  },
  values: {
    '-webkit-gradient': {
      property: 'background',
      value:    '-webkit-gradient(linear, right top, left bottom, from(#444), to(#fff)'
    },
    '-moz-linear-gradient': {
      property: 'background',
      value:    '-moz-linear-gradient(-135deg, #444, #fff)'
    }
  },
  testSupport: function(source, name) {
    try {
      var tmp = source[name];
      var obj = {}
      obj[tmp.property] = tmp.value;
      return !!CssDetector.div.css(obj).css(tmp.property);
    } catch(e) {
      return false; // FIXME: IE is still making troubles with supportsValue
    }
  },
  supports: function(name) {
    return (CssDetector.supportsProperty(name) || CssDetector.supportsValue(name));
  },
  supportsProperty: function(name) {
    return CssDetector.testSupport(CssDetector.properties, name);
  },
  supportsValue: function(name) {
    return CssDetector.testSupport(CssDetector.values, name);
  },
  usableBeforeOnLoad: function() {
    return !CssDetector.supports('background')
  }
}

if (!CssDetector.usableBeforeOnLoad) {
  CssDetector.div = $('<div id="detector_library_div">').hide().appendTo(document.body);
}