Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Progressive Enahncement to use SVG sprites with PNG fallback for IE6+7
/**
* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.