Introductions

So what is this whole PIE thing, anyway?

The documentation states it not quite so candidly, but here it is from my perspective:

PIE is an answer to a constant frustration. The frustration that no matter how much I want to be able to use the elegant decoration properties of CSS3, and no matter how many other browsers already support them, I won’t be able to realistically use them in serious client work for probably several years. At least until the current crop of IE browser versions shrink to negligible market share.

And that sucks. Big time.

As web developers, working with the “lowest common denominator” has always been the price we’ve had to pay for the great freedoms, accessibility, and reach that the Web gives us. I generally feel that the trade-off is worth it, but still it’s a huge pain in the ass, day in and day out. In my opinion it’s become even more difficult to deal with in the past year or two, due to the growth of modern browser share, the new browser performance race, and the explosion of advanced mobile browsers. It’s hard to look at these things, and see what could be possible were it not for that blasted IE piece of crap, and not tear your hair out in frustration.

In early 2010 I had the opportunity to work as co-architect on a version of the realestate.com.au web site for advanced smartphones, as part of my job at Local Matters. As there was a separate version for other mobile devices (“dumphones” as we like to call them), we were able to tailor this view specifically for phones with advanced WebKit browsers, e.g. iPhone, iPod Touch, Android, and WebOS devices. All of a sudden I was unconstrained by the shackles of IE, and was able to use CSS3 for the first time in a real-life scenario. It was liberating! We were able to achieve a beautiful page design with practically no images; development was incredibly fast and easy, and the site’s loading and rendering performance was blisteringly fast. The huge advantages of CSS3 decorations came into sharp focus.

When the project launched and I had to go back to working with IE, it was a huge letdown. I immediately started tossing ideas around in my head about ways I could make things less painful, and on evenings and weekends threw together some rudimentary code experiments. I was greatly inspired by Drew Diller’s DD_roundies which proved you could reliably render VML behind an element to implement complex box decorations. The first experiment was a rudimentary implementation of border-image; the next was a simple box-shadow with blur, but for square boxes only.

Over the next several weeks these silly little experiments slowly evolved into something serious and powerful. Separate scripts became a single HTC behavior. Fragile regular expression matching was replaced by a real CSS value tokenizer. Half-assed approximations of features became in many cases fully compliant implementations. Support for rounded corners, gradients, multiple backgrounds, etc. were added. Optimizations for size and performance were integrated. And so on.

By that point I realized I was on to something potentially huge. And it needed a name. I threw some ideas around with my wife and some friends, and eventually decided on “PIE”, standing unofficially for Progressive Internet Explorer.

And that’s how PIE came about.