Blog

It’s that time again… another PIE release! Version 1.0 beta 5 is now ready for your coding pleasure.

What’s new and big in this release? IE9 support! This release fills in the few CSS3 features that PIE already supported in IE 6-8 that aren’t natively supported by IE 9′s own rendering engine, specifically: linear-gradient in backgrounds, and border-image.

These features were totally re-implemented for IE 9 using SVG behind the scenes, which allowed us to avoid some of the limitations of the VML used in earlier IEs. For example: you can freely use rgba colors with opacity in gradients, and you can use the ‘repeat’ and ’round’ schemes in border-image. You can also use gradients in conjunction with background-size/position/repeat to create complex background patterns — we’ve got a new demo of some gradient patterns you can check out in IE 9.

Please note: IE 9 is apparently much more strict than earlier versions about requiring PIE.htc to be served with the correct content-type header. As always, make sure your server is configured to send the correct content-type header for .htc files.

In addition to the new IE 9 support, many other issues have been resolved including:

• The border-image support in IE 6-8 has been improved: it now correctly hides the actual border, and prevents collapsing of the border-width if a border-style is not set
• An error caused by non-px units on elements that cannot have children has been fixed
• The background origin and clip parameters are correctly parsed within -pie-background styles
• Padding on img elements is now correctly rendered
• Style changes due to :focus and :active pseudo-classes are now correctly detected
• The ‘transparent’ keyword is now recognized as a color when parsing styles
• A small number of IE installations out there without a functioning VML engine will no longer see errors and will fall back to non-CSS3 styles
• Various error conditions are fixed

See the full commit log for more details about the changes.

A note about file size: due to the added IE 9 support, the PIE.htc file is now roughly 6kB larger than the beta4 release. It is planned for a future release to split out IE 9 support and IE 6-8 support into separate files so the download size will be smaller for each version. We recognize that keeping this thing light is very important.

A special thanks go to the users in the forums who helped test and reported bugs against development builds of the new IE 9 support. Getting your real-world testing made a big difference in its quality!

Ready to go? Download PIE 1.0 beta 5 and get to it!

The nominations for the .net Magazine Awards 2011 came out this morning. I was shocked when my wife came running in to tell me that PIE had been nominated!

PIE’s nomination is in the “Innovation of the Year” category, which puts it up against some impressive heavyweights such as Google+, jQuery Mobile, and (dear to my heart) Sencha Touch. I’m not sure how PIE got nominated, but to whoever made that happen: thank you! I feel greatly honored.

If you’d like to vote for PIE, hop on over!

It kind of snuck up on me, but I actually managed to remember that today is the one-year anniversary of CSS3 PIE’s first public beta release. It’s been quite an exciting year since I unleashed this little thing out into the world!

In pure nerd style, here are some stats from the past year:

• 2.3 million page views from 452,000 unique visitors at css3pie.com
• 2700 posts by 760 users in 690 topics in the user forums
• 155,000 downloads
• 1056 followers on GitHub
• 1979 followers on Twitter (closing in on 2000, who will it be?)
• 156 commits to the master code branch with many more in other branches

What can’t be put into numbers, of course, is the overwhelmingly positive reaction from users around the world. It’s really been an awesome experience hearing words of enthusiastic support from hundreds of web developers whose lives are a little bit easier with PIE in their toolbox.

Further development is continuing steadily with help from some ambitious community members; stay tuned for a beta5 release coming in the next couple of weeks. Year two is going to be great!

CSS3 PIE version 1.0 beta 4 has been released. This is primarily a bugfix release. Major fixes include:

• Fixed JavaScript error when printing
• Tweaked detection of IE9 to perform rendering in compatibility and quirks modes but disable rendering in IE9 standards mode
• Fixed errors in rendering of border-image, images with zero dimensions, and others (thanks to Keith Gable)
• Prevented multiple downloads of images used more than once in a page
• Added support for CSS3 color keywords (thanks to Don Retzlaff)
• Fixed border-width keywords like ‘medium’
• Corrected positioning in RTL text environments
• Added a new -pie-poll custom CSS property which allows specifying that PIE should periodically check certain elements for position and size changes. This is useful for situations where IE does not fire onmove and onresize events when it should.

See the full changelog, and download PIE 1.0 beta 4 now.

After this beta 4 release, the priority for development is introducing proper support for missing CSS3 features in IE9, notably linear-gradient and border-image.

It’s been a long time coming, but PIE 1.0 beta 3 is finally out! A lot has gone into this release; the major improvements include:

• Performance! – The biggest single improvement in this release is performance. Extensive profiling was done to identify the slowest parts of PIE’s execution, and optimizations were added for many of them. The results are astounding: PIE is now up to four times as fast as beta2, especially noticeable in IE8. This means snappier page loads for you and your users!
• Lazy Initialization – Even with all the performance improvements, if your page is very long it may have hundreds of PIE’d elements, and this can add up to a noticeable delay. However, chances are that only a small portion of those elements are visible in the viewport on initial page load, so why waste time rendering all the others that aren’t visible right away? You can now specify the custom -pie-lazy-init:true; property in your CSS, which will delay initialization of any PIE’d elements that are outside the viewport on page load. They will be initialized and rendered once they scroll into view.
• PIE.js: standalone JavaScript version – There are now two ways to use PIE: the traditional PIE.htc behavior, and a new PIE.js standalone JavaScript file. While the .htc behavior is still the recommended approach, the JS version will allow using PIE in some situations where the behavior can not work. See the PIE.js documentation for details on when and how you might want to use the JS version.
• Works on table elements – Applying PIE to <table>, <th>, and <td> elements now renders properly and no longer results in an infinite loop.
• Works on images – You can now use PIE to round the corners of <img> elements.
• -pie-png-fix – You can now use PIE as a generic PNG alpha transparency fix for IE6, using the new -pie-png-fix:true custom CSS property. See the -pie-png-fix documentation for more details. This feature was contributed by Felix Gnass.
• Disabled in IE9 – As IE9 has native support for many of the same CSS3 as PIE, and it’s not yet clear what it will support in its final version, for the time being PIE has been disabled when loaded in IE9. This will be reevaluated as things unfold.
• position:fixed – PIE now positions its rendering elements properly when used on elements with position:fixed (does not apply to IE6 since it doesn’t support position:fixed natively.)
• Printing – PIE now removes itself from all elements when the page is printed. Besides avoiding many rendering problems, this also allows the user’s printing preferences regarding backgrounds to be honored and avoid wasting ink.
• Lots of other fixes and improvements – see the full commit log.

Download PIE 1.0 beta 3 now!

I’d like to thank the PIE user community for reporting and helping debug issues in the forums, for your generous donations to help keep PIE alive, and for so enthusiastically promoting PIE amongst your peers. It’s been a thrill to see this crazy little side project of mine spread so quickly and gain so many happy users!