CSS Gradients for IE9

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

This article by Robert Biggs goes into a solution for using SVG for gradients in Internet Explorer 9, because it doesn’t support CSS3 gradients. The core benefit being that the SVG image format is XML and actually rather similar in structure to how you create a -webkit-gradient. Thus you get the benefit of programatic declaration of colors and ease of updating.

Earlier in the article, Biggs also makes a good point about transitions and why doing them through CSS is better than JavaScript:

The single-threaded nature of JavaScript makes it inefficient for complex animations. Offloading style animations to the browser’s CSS rendering engine frees up JavaScript and allows the browser to use threads and hardware acceleration for better optimization.

I’d argue that (animations/transitions == visual design == CSS territory) so it’s appropriate regardless of the benefit to freeing up JavaScript.

Direct Link →