I recently set out to spice up my website with some CSS 3 features; namely, border-radius and box-shadow. These can be very effective in causing parts of your page to stand out, especially when used together, though there are some caveats to doing so, which I will discuss later.
The main point of this post, however, is forcing Internet Explorer versions older than 9.0 to show these styles. Perhaps I am late to the party, but I recently discovered what I have found to be the best tool for doing this: CSS3 PIE.
What’s CSS3 PIE?
PIE is an acronym for “Progressive Internet Explorer”. CSS3 Pie is Jason Johnston’s awesome system for making CSS3 features available in versions of Internet Explorer previous to 9.0. Much as it pains me to do so, I will avoid the obvious cheap puns and jokes on the tool’s name to prevent distracting from the usefulness of this tool.
If you have used any of the CSS3 styles on your website, you will have noticed that they just don’t show up in I.E. 8 or earlier. Nada. Zip. Zilch. While this is not the end of the world if you’ve been creating your pages properly—that is, not relying solely on styles to convey important semantic information, but using tags properly as well—it can be jarring to see your beautiful styles vanish completely when viewed in I.E.
I have come across a few different approaches to “modernizing” Internet Explorer, such as Selectivizr (which I use), but none of them do everything, and the approaches taken can have negative side effects on your site.
The problem we want to solve
The specific effect I was looking for, which led me to CSS3 PIE, was the combination of rounded corners and a drop shadow on a <div> that uses the jQuery UI ui-widget styling. This combination is great for causing content to “pop” out of the page; I use it with the jQuery UI ui-icon-info to highlight new content on the site.
This is the style I am describing, viewed in Firefox 3.6, immediately followed by Chrome:
Ignoring the slight difference in color, note how the combination of rounded corners and shadows nicely set the box off from its surrounding content.
Now, look at the same CSS in Internet Explorer 8.0:
It’s…really not the same thing. Better than no border at all, but the content is not standing out from its surroundings to nearly the same extent. Not to mention the ugly square corners.
Now, let’s apply CSS3 PIE to the ui-widget styling with a single line (you must have first placed the PIE.htc file in the directory you will reference on your web server):
behavior: url(Styles/PIE/PIE.htc);
Again, note that I have placed the PIE.htc file in the PIE directory I created under my Styles directory. You can place the file pretty much anywhere you want on your server as long as you reference it properly. If you are having issues and are unsure if you have referenced the URL to the .htc file properly, simply place it temporarily into the same directory as the HTML file, an remove the path from the url() part of the statement.
Now, let’s look again at the page in I.E. 8, after applying CSS3 PIE:
This may not seem like much, but to those who have been struggling to get this effect to work in I.E., it is a revelation.
How does CSS3 PIE work?
I am not going to re-hash the CSS3 PIE website documentation, which is more than adequate. Here is the FAQ: http://css3pie.com/documentation/q-and-a/ It goes into detail on how to use CSS3 PIE, limitations, etc. I did mention above how to debug the url to the PIE.htc file; I will also note that the path to the .htc file needs to be relative to the HTML file(s) it will be applied to, not to the .CSS file it lives in. Another point Jason covers is that you may need to apply position: relative and/or a positive z-index value to your element to get PIE to work in I.E. 7 & 8; otherwise, you may not see any effect at all.
That being said, my intention in writing this blog post is more along the lines of here-is-this-really-cool-technique/tool-that-I-just-found, check-it-out-if-you-haven’t-already-seen-it, rather than an exhaustive how-to, since that is well-covered on the CSS3 PIE site.
So, perhaps more to-the-point, how well does it work?
CSS3 PIE is actually in Beta, but I found it very stable. And there is just no other approach I’ve found that does what PIE does, as smoothly and easily as it does it.
The effects even work on I.E. 6, although you will have to put in some serious effort if you want pixel-perfect fidelity with I.E. 7 and 8. The thing is, though, even the slightly sub-optimal I.E. 6 experience works pretty much out-of-the-box once you have things working in I.E. 7 & 8; and what are your other options, realistically? One thing I have found: if you needed to add position: relative and/or a positive z-index value to your element to get PIE to work in I.E. 7 & 8, you may need to reverse that in your I.E. 6-specific style sheet with a position: absolute statement.
Summing up
In short, I consider CSS3 PIE to be a hit, and will be using it it my web projects going forward. I will also be keeping a sharp eye out for updates to the project, and, hopefully, its eventual move from Beta to final release.
Oh, and the caveat I mentioned earlier, when using border-radius and box-shadow together on a <div> element? You will want to keep the values for the radius and the shadow the same, i.e., 5px; otherwise, you may encounter a hideous square box outline in addition to the nicely rounded corners you wanted!
Andrew Cushen's Blog 