Progressive Enahncement to use SVG sprites with PNG fallback for IE6+7

style.css

/**
 * Progressive Enahncement to use SVG sprites with PNG fallback for IE6+7
 *
 * The trick:
 * Legacy IE does not support rgba values.
 * By defining a rgba background color together with the
 * SVG background image for all modern browsers, legacy IE 
 * will ignore the SVG and use the 
 * first background definition containing the fallback PNG 
 *
 * Compatibility:
 * Safari 5.1+
 * Chrome 16
 * Firefox 9+
 * Opera 11.6+
 * MobileSafari on iOS 5
 * IE6, IE7, IE8, IE9
 *
 * Known Issues:
 * - Does not work in Firefox < 4
 * - Does not work on Android 2.x Browser:
 * -- supports RGBa but not SVG, so it won't show anything
 * 
 */

.sprite {
  background: url(sprite.png) no-repeat 0px 0px;
  background: rgba(0,0,0,0) url(sprite.svg) no-repeat 0px 0px;
}