Blog

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!

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 0x0 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