18 June 2014

With $experimental-support-for-svg, Compass brings a way to make websites compatible with modern browser.

Some function syntaxes like linear-gradient don’t have a clear syntax spec, different browsers have different implementations. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

For example IE won’t support linear-gradient(left, #ffffff, #dddddd), it has to be linear-gradient(to right, #ffffff, #dddddd).

So if you write left, Compass will write browser-specific prefixes -webkit and -moz but it won’t change the left for IE (which needs to right), so when you write the following code in sass, IE(10/11) will not display the linear-gradient background.

+background-image(linear-gradient(left, #ffffff, #dddddd))

So you can set the $experimental-support-for-svg to true to solve this problem with a svg-image

$experimental-support-for-svg: true
    +background-image(linear-gradient(left, #ffffff, #dddddd))

That will generate a data URI based svg image like

background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlb..")