Fixing IE gradients with Rails 3.1 and SCSS Calvin Correli

Fixing IE gradients with Rails 3.1 and SCSS

Other·Calvin Correli·Nov 30, 2011· 1 minutes

I kept getting my CSS gradients in IE 9 messed up by the Rails 3.1 Asset Pipeline. The symptom was that the colors were off - way off! Like purple instead of white or gray. It took me several hours to get this to work, so I figured I'd share the solution. The colors were off because IE's progid:DXImageTransform.Microsoft.gradient filter doesn't understand normal CSS colors like 'white' or '#fff'. It needs to have them fed just so. At first I thought it was the YUI compressor that changed the value, but YUI actually has special handling of IE filters. SCSS is supposed to have the same, but it didn't work for me. Compass has a solution, which includes a custom helper method, ie-hex-str. So I imported that, and changed my filter to use it. But getting my own custom SCSS helper function to work and be called too quite a bit of tweaking. Most of the time it was just being ignored, and I saw ie-hex-str(xxx) in my output. The result is this SASS helper file, dropped into config/initializers:

	require 'sass'

	module Sass::Script::Functions
	# LARS: Snatched from compass - 2011-11-29 - used for gradients in IE6-9
	# returns an IE hex string for a color with an alpha channel
	# suitable for passing to IE filters.
	def ie_hex_str(color)
	assert_type color, :Color
	alpha = (color.alpha * 255).round
	alphastr = alpha.to_s(16).rjust(2, '0')
	Sass::Script::String.new("##{alphastr}#{color.send(:hex_str)[1..-1]}".upcase)
	end
	declare :ie_hex_str, [:color]
	end

view raw sass_helpers.rb hosted with ❤ by GitHub

and this mixin.css.scss

	@mixin gradient($first, $second) {
	background-color: $second;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{ie-hex-str($first)}', endColorstr='#{ie-hex-str($second)}');";
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{ie-hex-str($first)}', endColorstr='#{ie-hex-str($second)}');;
	zoom: 1;
	background: -webkit-gradient(linear, left top, left bottom, from($first), to($second));
	background: -moz-linear-gradient(top, $first, $second);
	}

view raw mixins.css.scss hosted with ❤ by GitHub

See the entire gist here. Enjoy!

powered by

Comments