SASS IE Filters / by Jordan Isip

One issue I just ran into was with IE filters on this gradient function I have based on The Ultimate CSS Gradient Generator output. 

=gradient($startColor, $endColor) background: $startColor background: -moz-linear-gradient(top, $startColor 0%, $endColor 100%) background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$startColor), color-stop(100%,$endColor)) background: -webkit-linear-gradient(top, $startColor 0%,$endColor 100%) background: -o-linear-gradient(top, $startColor 0%,$endColor 100%) background: -ms-linear-gradient(top, $startColor 0%,$endColor 100%) background: linear-gradient(to bottom, $startColor 0%,$endColor 100%) filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='$startColor', endColorstr='$endColor')

This worked perfectly until we tested it on IE. IE’s gradient filter was returning a harsh dark blue to black gradient for any colors that were passed into the function. 

Broken Gradient on IE

To figure out what was going on, I fired up IE on SauceLab’s Cloud VMs. SauceLabs also has a handy program called"Sauce Connect"which allows you to create a tunnel and test your localhost. Inspecting the element using IE’s in browser developer tools showed that it was displaying variable names rather than the values.

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='$startColor', endColorstr='$endColor')

To fix this, we can use interpolation #{ } to spit out the proper values for the variables:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{$startColor}', endColorstr='#{$endColor}')

Almost done. While I was reading up on IE filter gradients, I found out that the startColorStr and endColorStr colors expect a non-shorthand hex as well as the alpha value. In the setup above, #{$color} in SASS will output the shorthand of the color if available - so #006699 will turn into #069. Luckily, since SASS 3.2, we can use the function ie_hex_str() to convert the colors to full hex along with the alpha value. So all we need to do is wrap the color variables in the IE filter with ie_hex_str. The finished cross-browser gradient function will now look like this:

=gradient($startColor, $endColor) background: $startColor background: -moz-linear-gradient(top, $startColor 0%, $endColor 100%) background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$startColor), color-stop(100%,$endColor)) background: -webkit-linear-gradient(top, $startColor 0%,$endColor 100%) background: -o-linear-gradient(top, $startColor 0%,$endColor 100%) background: -ms-linear-gradient(top, $startColor 0%,$endColor 100%) background: linear-gradient(to bottom, $startColor 0%,$endColor 100%) filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{ie_hex_str($startColor)}', endColorstr='#{ie_hex_str($endColor)}')

So in use, we can use this SASS mixin function by calling:

+gradient(#FAFAFA, #FFF)

This will ouput the following CSS:

background: #fafafa; background: -moz-linear-gradient(top, #fafafa 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #ffffff)); background: -webkit-linear-gradient(top, #fafafa 0%, #ffffff 100%); background: -o-linear-gradient(top, #fafafa 0%, #ffffff 100%); background: -ms-linear-gradient(top, #fafafa 0%, #ffffff 100%); background: linear-gradient(to bottom, #fafafa 0%, #ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFAFAFA', endColorstr='#FFFFFFFF')