PIE 1.0 beta 3 released

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!

29 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. 50outs

    Sound very good – Thanks a lot for all the efforts, saved me a ton of work already!

    December 6, 2010 4:00 pm

  2. Adam

    Excellent. Again, thanks for putting all the effort in to PIE, it’s really making my life so much easier!

    December 6, 2010 4:19 pm

  3. Andy Walpole

    Yeah baby lets go! Good work

    December 6, 2010 5:06 pm

  4. Marco Barbosa

    Thank you.

    Keep up the good work, the web appreciates it!

    December 6, 2010 6:22 pm

  5. Martijn van Turnhout

    Fantastic work, Jason! CSS3 PIE has become an integral part of my front-end framework. It works like a charm and saves me a lot of trouble.

    December 6, 2010 6:44 pm

  6. Anathema

    Thanks Jason.

    Been waiting :)

    I see heartbeat still only targets IE8. Any luck finding a solution?

    December 6, 2010 8:48 pm

  7. Martin Wawrusch

    Fantastic.

    December 7, 2010 10:45 am

  8. Hans Kuijpers

    Thanks for the update…. we’re using is on yireo.com

    December 7, 2010 2:12 pm

  9. Daniel Thorne

    Huge thanks! This has got to be the single most useful download to bless web developers in years. Keep up the good work.

    December 7, 2010 2:28 pm

  10. Spudley

    Thank you very much!!! We really appreciate the work you’ve done on this project.

    This fixed the one big problem we had, which was a specific page that crashed the browser. (fortunately it was an internal admin page, not a public facing one, so we were able to live it it, but glad to have it fixed all the same)

    December 7, 2010 2:50 pm

  11. Ole Michelsen

    Fantastic work – I use it extensively, and though I know it’s only in beta, it has cause me very few problems. Most of which you have now fixed in this long awaited release.

    Keep up the good work! :-)

    December 8, 2010 8:29 am

  12. FJ

    Very nice.
    But i have a problem with position:fixed on ie6.

    Check “test 8″ on http://flashjunior.ch/school/test/ietest/pie/

    any idea/help?

    December 9, 2010 10:55 am

  13. Neal

    Perhaps this is a stupid question, but let me get this straight: you can curve the edges of images with this script? I thought border-radius effected everything but images.

    December 10, 2010 1:49 am

  14. Yotam

    All right!

    I thought you’d stopped updating.

    Keep it up!

    December 12, 2010 9:20 am

  15. franco

    GREAT! THANK YOU!

    January 29, 2011 2:40 pm

  16. plwm

    thank you very, very, very much !
    If a team like you, can, after tons of efforts and with a lot of talent, override IE’s display bugs, why MS didn’t do that far before ?… Are they lazy, or completely incompetent ??? I think they are simply overwhelmed and are afraid of free web …

    Congratulations !!!!

    February 7, 2011 12:08 pm

  17. Yair

    As for IE9 support, it seems like border-image will not be a part of the supported spec. It’s a critical part of a project I’m working on. Is there a way to enable only that (I read the HTC, and to be frank – I couldn’t understand where is the part you stop IE9 from running on the HTC at all. Stupid me)

    February 8, 2011 2:48 pm

  18. Kathir

    Really a great work.. thanks a lot.

    February 12, 2011 9:40 am

  19. Dan

    Awesome work. I will continue to tell people about this awesome plugin. Excellent.

    March 11, 2011 6:19 pm

  20. Romuald

    Now IE9 is out, will you make a change on css3pie? The script is awesome, but without ie9 it will be a problem.

    March 16, 2011 10:14 am

  21. Tabman

    Thank you thank you thank you, you’ve rocked my world.

    March 26, 2011 5:13 pm

  22. Oliver

    Can you please update your blog to at least let us know what the progress is on IE9 support? maybe an estimated release date? css3pie is awesome, but IE9 really screwed everything up since my gradients will no longer show.

    March 27, 2011 9:12 pm

  23. Zdravko

    Excellent! I’ll start working on this immedialtely. Thank you!

    Any chances for text-shadow support?

    October 27, 2011 8:43 am

  24. Dhonde

    CSS3 pie is very good working in ie7 but it’s not working ie8 please give me solution for it working correctly in ie 8

    November 30, 2011 1:35 pm

  25. Dhonde

    Santosh
    CSS3 pie is very good working in ie7 but it’s not working ie8 please give me solution for it working correctly in ie 8

    November 30, 2011 1:36 pm

  26. Lisa

    Works great, except when using in conjuction with hidden sections of the page. I have this javascript on a page…
    var f = document.getElementById(id);
    if (f.style.display == “block”) {
    f.style.display = “none”;
    } else {
    for (var i = 0; i < l_IDs.length; i++) {
    var a = l_IDs[i];
    var e = document.getElementById(a);
    if (a == id) {
    e.style.display = "block";
    f.scrollIntoView(false);
    } else {
    e.style.display = "none";
    }
    }
    }
    and when you expand the bottom elements to display the block the height of the background with the box shadow effect does not render down, it stays at the original height. I've tried putting in a height: auto; into the css, but that does not work either. If I use the ie-css3.htc, I can get the rounded corners, but not the box shadow effect but I don't have this problem.
    This is only in IE, not FF.

    February 10, 2012 10:13 pm

  27. Chaitanya

    I am using like this it is working fine chrome and FF. But it is failing in IE it is giving 404 page. Can you please suggest me how fix in ie
    behavior: url(../js/libs/PIE.htc);}

    August 28, 2012 7:24 am

Continuing the Discussion

  1. CSS3 PIE 1.0 beta 3 / PHP::Portal

    [...] Официальный релиз [...]

    December 7, 20109:22 pm
  2. CSS3PIE is updated to 1.0 beta3 | Željko Prša – Magento Front-End development

    [...] the rest of it is on their blog to read. This entry was posted in blog. Bookmark the permalink. ← [...]

    December 16, 20103:39 pm

Some HTML is OK

or, reply to this post via trackback.