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!

This post originally appeared on The DevStop.