Is it possible to generate IE gradients in the current Compass beta (0.11.beta.6)? Yes, you can now utilize the compass/css3/images module for this purpose. With just two concise commands, create your gradients effortlessly:
@import "compass/css3/images";
@import "compass/utilities/general/hacks"; /* Ensure compatibility with filter-gradient */
.whatever {
/* For IE; recommended to be placed first or in a separate stylesheet: */
@include filter-gradient(#aaaaaa, #eeeeee);
/* Fallback option: */
background: #cccccc;
/* Utilize CSS 3 and vendor prefixes: */
@include background(linear-gradient(top, #aaaaaa, #eeeeee));
}
The resulting CSS output will look like this:
.whatever {
*zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')";
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE');
background: #cccccc;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee));
background: -moz-linear-gradient(top, #aaaaaa, #eeeeee);
background: -o-linear-gradient(top, #aaaaaa, #eeeeee);
background: linear-gradient(top, #aaaaaa, #eeeeee);
}
While combining IE and non-IE gradient code in one call would have been preferable, the limitations of IE's DXImageTransform function make it impractical.