CSS Gradients in IE6, IE7, IE8–Using CSS3 PIE to fill the gap in legacy browsers

Just a quick post to share something that many are unaware of, and that I myself was unaware of until recently. Most of us are aware of CSS gradients, Modernizr, using polyfills, etc. – but today I want to highlight a specific fallback that has saved my designs.

CSS3 PIE

Sometimes I pronounce “IE” as if I’m falling from a precipice: “aiiyeeeeeee!!!” Why? Well, consider this style which applies a linear gradient:

.selector {
background: #233331;
background-image: -webkit-gradient(linear, left top, left bottom, from(#4d6f6b), to(#233331));
/* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#4d6f6b, #233331);
/* Chrome 10+, Saf5.1*/
background-image: -moz-linear-gradient(#4d6f6b, #233331);
/* FF3.6 */
background-image: -ms-linear-gradient(#4d6f6b, #233331);
/* IE10 */
background-image: -o-linear-gradient(#4d6f6b, #233331);
/* Opera 11.10*/
background-image: linear-gradient(#4d6f6b, #233331); }

This is all fun and games until you test in Internet Explorer < 9. There, you just get solid block of #233331. Now, as this is the second stop anyway, it’s not the end of the world. It’s nicer, though, to hold onto that gradient that you had decided upon! Enter CSS3 PIE.

Easy as (CSS3) Pie

I couldn’t decide on the cheesy “easy as pie” reference or a much more obscure but only slightly less cheesy Twin Peaks quote.

Anyway, let’s solve our IE problem. Note that this isn’t just for CSS Gradients; CSS3 Pie can help you fill the gap for a variety of features:

    • border-radius
    • box-shadow
    • border-image
    • multiple background images
    • linear-gradient as background image

Enabling support for linear gradients is just a matter of telling PIE to take care of it. How?

Add PIE Behavior to the Style

Just add this at the bottom of your linear gradient definitions:

-pie-background: linear-gradient(#4d6f6b, #233331);
/*PIE*/
behavior: url(/Scripts/PIE.htc);

Should be obvious, but make sure you have the correct location to the .htc file. You can download everything you need from the project site on Github.

Load the CSS3 PIE script

I do this conditionally using yepnope.js, but how you load it is up to you. The point is that CSS3 PIE can’t do any of it’s work if you don’t load it :-). Note that the script below also assumes that you’ve loaded Modernizr for the test condition. (Note: Modernizr now incorporates yepnope and uses it in .load, but I’m using an older build of Modernizr here).

yepnope({
test: Modernizr.cssgradients,
nope: '/Scripts/PIE.js'
});

What about <noscript>?

I am a huge fan of doing everything possible to avoid delivering a broken interface to a user, no matter how far into the past they are stuck. However, as this is just style and not functionality, I’d mark it as an exception. People who are in the intersection of legacy browsers and disabled JavaScript simply will not benefit from this.

So, could you use an image fallback? Sure. You could also get rid of the CSS completely and use SVG. Both are valid options worth considering, and I plan to take a closer look at all the pros and cons soon. I encourage everyone to do the same and use whatever is most appropriate for the constraints and use cases of the project.

Conclusion

CSS3 PIE eases some of the pain caused by those who cling to (or at times are forced to use) old versions of IE. The project is well documented, and you should be able to quickly apply any of the detailed instructions for each of the supported features. Give it a shot and let me know what you think!

Advertisements

About David Ruttka

I've been "making computers do things" since I first saw King's Quest on a 286 PC in the mid-80's, but I turned it into a career just over a decade ago. While the majority of my experience has been on the Microsoft stack (C#, .NET, ASP.NET), I've recently been diving deeper into JavaScript and exploring the Ruby universe. Occasionally, I'll do a public speaking gig or write a blog post. When I'm not coding, I enjoy spending time with my family, watching hockey, and playing the occasional video game. You can also find me on Stack Overflow, Google Plus, and Twitter. Microsoft Certified Programming in HTML5 with JavaScript and CSS3 Specialist; MCPD Windows Developer 3.5
This entry was posted in Design and tagged , , , , . Bookmark the permalink.

2 Responses to CSS Gradients in IE6, IE7, IE8–Using CSS3 PIE to fill the gap in legacy browsers

  1. Sweet! I had never heard of this, and it sounds good to know. One question: what is a .htc file and what does it do?

    Second question (I lied): what’s the Twin Peaks quote? 🙂

  2. David Ruttka says:

    “Diane, if you ever get up this way that cherry pie is worth a stop.”

    As for what is .htc and what does it do, for some reason I read your question as Schwarzenegger in Kindergarten Cop: “Who is your daddy, and what does he do?”

    My understanding of .htc: it’s an older technique used to bundle the HTML and scripts that enable DHTML behaviors in older IE browsers. I actually haven’t looked “inside the casing” of an .htc because much like sausage, I’d rather just enjoy the taste without knowing how it’s made.

    http://en.wikipedia.org/wiki/HTML_Components

Thoughts?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s