Sprockets, SASS and IE's MS-filter (A new blue screen of death)

Question

Hope I managed to bait you in using the BSOD title =)

I use a linear-gradient mixin which the syntax is like this:

+linear-gradient(top, #ffffff, #f7f7f7)

Which generates this in IE after precompilation

progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff", endColorstr="#f7f7f7",GradientType=0 )

This generates a ugly blue black bar in IE 8/9 because IE refuses to take 3-char hex code

(hey man, white and #ffffff is fine, don't ask me why. The blue/black bar comes from IE's default setting of using blue/black for the color if it doesn't recognize the syntax).

My question is, how do I rake assets:precompile without compressing character color codes? I want as much minification as possible when compiling, but just not interpolating my color codes.

score 0 · Accepted Answer · answered Oct 08 '12 at 10:03

SASS has a built in function, called ie-hex-str.

Case in point for my example:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#{ie-hex-str(nth($full, 1))}", endColorstr="#{ie-hex-str(nth($full, 2))}",GradientType=0 );

I think the general issue is that IE 8/9 does not accept short-hex for anything where it expects a alpha channel, anything to do with opacity. Instead, you can specify a 8-char hex code for it.

Sprockets, SASS and IE's MS-filter (A new blue screen of death)

1 Answers1