How to make cross browser gradient mixin in compass, with IE9, IE8, IE7 and Opera?

Question

I want to make mixin for all browser including IE9 IE9, IE8, IE7 and Opera.

Like http://www.colorzilla.com/gradient-editor/ generate the code

it generate

Answer 1

What is the benefit of background-size: 100%;?

What is the benefit of using background-image instead background?

SVG images are background images, and the contents of that property is a programatically generated image. To keep it consistent, Compass uses the background image. Additionally, specifying background-image can allow the coder to specify a background-color that won't get nuked by the mixin.

Setting background-size ensures that the image actually stretches to fill the space of the element, instead of being the size of the image itself.

Is there a way to add filter:none to the element only for IE9 in Compass?

How to get IE6-8 compatible code too in compass like this filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );?

There are three options to both of these:

1. Extend the mixin/write your own mixin. The included mixins are just files that are stored in Compass's install location, so you can always edit them, or use them to create your own mixins.
2. Use CSS3 PIE with Compass.
3. Put the IE-specific code into one or more IE-specific stylesheets (this is my preferred method if PIE isn't an option, as it sandboxes the CSS, so you don't have to do hacks to get one version or another to ignore a given line of CSS).

Answer 2

First of all give these a try in your _base.scss

@import "compass/support";
$legacy-support-for-ie7: true;
$legacy-support-for-ie8: true;
$experimental-support-for-microsoft: true;
$experimental-support-for-pie: false;
$experimental-support-for-svg: true;

Then add in

@import filter-gradient($start-color, $end-color, $orientation)