Blog

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!

I am thrilled to announce that CSS3 PIE is now officially a part of Sencha Labs, a non-commercial foundation for innovative open source projects funded by Sencha. There it joins other cutting-edge web toolkit projects including Raphaël, JavaScript InfoVis Toolkit, and jQTouch. This is huge news for the future of PIE, and exhibits Sencha’s commitment to pushing client-side web technology forward.

For PIE users, not much will change. It will remain free and will continue to be developed in the open and released under a liberal open source license. By joining Sencha Labs, it gains a permanent home and is backed by the resources of the foundation, so you can be sure it will be maintained going forward. I will continue to be its primary maintainer and responsible for the progress and direction of the project, as an employee of Sencha. Other members of the brilliant Sencha team may contribute too, and of course, contributions from the community are always welcome!

I’m really looking forward to PIE’s continuing development at its new home. Expect big things to come!

CSS3 PIE version 1.0 beta 2 has been released! This release addresses many of the most serious issues present in beta 1. Notable fixes are:

• The box-shadow rendering has been completely rewritten. The new version no longer uses any filters, which has completely eliminated the very poor performance previously seen when using box shadows, particularly on large elements. It is also much more accurate in the rendering of blurred shadows; it is now indistinguishable from the blur rendering of other browsers.
• Elements with PIE applied now react to mouse events (hover/click/etc.) throughout their entire background area, rather than just on their text contents.
• A workaround has been put in place to prevent the CSS3 rendering elements from getting out of sync with the position and dimensions of the target element in IE8.
• Styling of <input/> buttons and <button/> elements has been fixed.
• No longer throws an error when applied to hidden elements or elements with 0×0 dimensions.
• Background images are now clipped more accurately in IE8, preventing extra pixels bleeding around non-repeated images and making sure repeated images go all the way to the edges.
• Various minor performance improvements.
• PIE has been relicensed under a dual-license model. In addition to the Apache 2 license, you may now alternatively use PIE under the terms of the GPL2. This allows it to be distributed in open source channels such as drupal.org and wordpress.org.

I’d like to give a huge thanks to the community for their overwhelming support and encouragement since the first release, and for the excellent bug reports and testcases they have produced to help make PIE better. Keep ‘em coming! You guys rock!

Download PIE 1.0beta2

A lot of people have been curious about what exactly makes PIE different from the several other projects out there which attempt to implement some level of CSS3 support in IE. There are so many aspects to CSS3 that it can be difficult determining what product tackles what pieces.

To help answer that question, I’ve added a new page to the documentation: Comparing PIE to Other CSS3 Products.

I’ve set up a quick-and-dirty online discussion forum at http://css3pie.com/forum/ for PIE users. This is the new venue for posting questions, getting troubleshooting help, and other PIE-related discussions. Hopefully it is a much more convenient channel, that doesn’t require sifting through lots of email like the mailing list did.

As usual, please keep discussions on-topic and civilized. If you’re needing troubleshooting help, please make sure you’ve read through the documentation and known issues, and check previously posted forum questions to make sure your issue hasn’t already been addressed.

PIE developer discussion will still happen on the Dev mailing list.