CSS3 PIE - Taming IE's CSS Limitations

Tonight, I was stuck trying to persuade some nasty CSS to render properly in IE8. I could kind of sort of get what I wanted done by using the filter and -ms-filter CSS directives, but not quite. The fact that the CSS was on the cluttered side (and naturally, I didn't write it) didn't help.

Then, thanks to a StackOverflow article I learned about css3pie.com.

CSS3 PIE allows you to write "normal" CSS code, and thanks to the inclusion of a single line (behavior: url(.../PIE.htc)), that code will work properly in IE8 and 9.

It took a tiny bit of mucking around to work: I needed to add the correct content-type to my .htaccess and use -pie-background: linear-gradient(...) for the gradient instead of a normal background: ... directive.

Still, compared to what I was facing, this was down right amazing.

Oh yeah, one other gotcha I ran into: I wanted to change the background color on hover. Originally I had:

.button {
  background: linear-gradient(#000,#FFF);
  -pie-background: linear-gradient(#000,#FFF);
}

.button:hover {
  background-color: #DD0000;
}

But that didn't trigger the background change in IE. Along with changing background: on hover, I also needed to tweak -pie-background. So the following code worked perfectly:

.button:hover {
  background-color: #DD0000;
  -pie-background: #DD0000;
}

Yeesh, at this rate, kids today won't know the pain of programming around all the nuances of half a dozen different browsers. It'll all just work. What fun is that? No doubt the age of browser hacks will be remembered like punch cards - a badge of honor to be worn by old timers.