If a website uses a great deal of CSS, it makes sense to create compatibility with IE via a CSS3 JavaScript shim. But if your site only uses a few CSS3 values, loading 20K of JavaScript to make IE work is overkill, and a significant waste of resources.

Microsoft has long supported its own way of creating many visual effects that are now featured in CSS, ever since IE 5.5. The problem is that the filters are rather long, complex, proprietary (supported only in IE) and somewhat difficult to understand; I find it easiest to use various tools to convert CSS into MS-specific filters, and then call those generated values with conditional comments.

This article covers MS-filters for gradients, rgba/hsl and opacity; in articles to come I’ll talk about ways to create text and box shadow along with transformations for IE.

Gradients

Gradients are only supported in IE10+, but simple gradients (one color start, one color end, no stops) can be made by using DXImageTransform.Microsoft.Gradient.

Opacity

Opacity effects are relatively easy to replicate in IE8. You don’t even need to use a generator; just cut and paste the code below and change the value as needed (the Microsoft version of the filter measures opacity between 0 and 100, rather than 0 and 1):

filter: alpha(opacity=50);

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.