PIE 2.0 beta 1 released

I am thrilled to announce the release of CSS3 PIE 2.0 beta 1! This is the first official release of the 2.0 development line, which has seen several major refactoring efforts to improve performance, enhance feature support, and fix many long-standing bugs.

The major changes from 1.0 are:

  • PIE.htc is now a very small (~2K) stub file which loads a secondary logic file optimized for the current IE version, resulting in a smaller total download size. See the blog post on the new loading system for details on how this works and its benefits. As a user this shouldn’t change how you use PIE, except that instead of only copying a single file you now need to copy all the files in the distribution directory together as a unit.
  • A new -pie-load-path property can be set in the CSS for the <html> element to customize where the secondary logic files are loaded from, for example an external CDN.
  • The VML renderers in IE 6-8 have been heavily refactored: the resulting DOM is smaller, and the VML is now initially built up as a single markup string and inserted all at once instead of using the DOM API. This makes the insertion faster, and also allows the use of certain VML features that could not be used before (e.g. o:opacity2).
  • The linear-gradient parsing has been updated to support the final spec syntax (the “to side” syntax and new angle origin.) You will need to update your CSS to the new syntax to avoid incorrect angles or blank rendering.
  • Linear gradients with rgba colors can now render the alpha channel in IE 6-8, but only for gradients with two stops.
  • Linear gradients in IE 9 are now rendered using Canvas rather than SVG, which allows it to display properly when used along with -ms-transform.
  • Box-shadow rendering in IE 6-8 now properly renders the alpha channel in rgba colors when the shadow has a blur radius.
  • Border-radius rendering in IE 6-8 has been refactored, fixing the “bumps on corners” bug when the border width is larger than the corner radius, adding support for groove/ridge/inset/outset borders, and improving transitions around corners between differing border styles. The new border-radius demo page shows the improved rendering.
  • The background-origin, background-size, and background-clip parameters within the -pie-background shorthand property are now supported for non-repeating backgrounds in IE 6-8.
  • Various other minor fixes; see the full changelog for details.

This is definitely an early beta, so it’s very likely there are many new bugs to be squashed. While the stable PIE 1.0.0 release is still the recommended version for public sites, I do encourage everyone to try out the beta and report back any bugs or other issues you may encounter in the new 2.0.x beta forum. Even if you don’t encounter problems, reporting back your success will also be helpful to help us gauge stability and move toward a swift final release.

Download PIE 2.0 beta 1 and give it a try!

Thanks everyone!

23 Responses

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

  1. FJ

    WOW. thx a lot!
    Here my test with 2 beta 1:
    http://www.flashjunior.ch/school/test/ietest/pie/2/

    January 28, 2013 6:24 pm

  2. Dave

    Thank you very much for the update. Your project makes the internet a better place!

    January 28, 2013 7:41 pm

  3. Brent

    Thank you!

    January 28, 2013 8:43 pm

  4. Michael

    Man I would love to use rgba colors with box-shadows. Thanks for your efforts. I’ll give the beta a try.

    January 30, 2013 2:15 pm

  5. Yotam

    PIE has been the best polyfill I have encountered up until now!

    Thank you!

    January 31, 2013 12:23 pm

  6. Marius

    Thank you very much for your wonderful work, those idiots from Microsoft must pay you for this job.
    Thank you!

    February 7, 2013 1:29 pm

  7. Arthur G.

    Thank you so much for all your hard work! I can’t tell you how useful this has been!

    February 21, 2013 7:38 pm

  8. gucong

    Wen i use “linear-gradient” and “border-radius” in same time, background is overflow.

    March 19, 2013 5:35 am

  9. Alessandro Brunelli

    I’m using PIE 2.0 beta 1 for my website:

    http://www.hotel20.it

    and it works perfectly!

    Thank you very much!

    April 4, 2013 3:21 pm

  10. tigeruping

    A new -pie-load-path ,I found a bug,
    html {
    -pie-load-path: “http://any.server/path/to/pie-js-files/”;
    }
    can not add “”into ,becuase “”can add by url,
    so has two way to fixed,
    1:
    html {
    -pie-load-path: http://any.server/path/to/pie-js-files/;
    }
    delete “”
    2:
    PIE_uncompressed.htc
    start 52 line:
    before:
    if( !baseUrl ) {
    baseUrl = doc.documentElement.currentStyle.getAttribute( ( isIE6 ? ” : ‘-’ ) + ‘pie-load-path’ );

    }
    edit after:
    if( !baseUrl ) {
    baseUrl = doc.documentElement.currentStyle.getAttribute( ( isIE6 ? ” : ‘-’ ) + ‘pie-load-path’ );
    baseUrl = baseUrl.replace(/\”/g, “”);
    }
    add baseUrl = baseUrl.replace(/\”/g, “”); replace ‘”‘

    April 27, 2013 2:17 am

  11. Christian

    It’s been 8 months since PIE 2.0 beta 1 was released. Is a further update planned any time soon?

    August 23, 2013 8:43 am

  12. PicklePilot

    This is great! Just one question. Is there support for inset box shadows yet?

    August 26, 2013 1:57 pm

  13. Man

    Found a bug. My scenario: 2 divs(parent and child). Both have pie(2.0) applied to them. If the parent has borders applied to it, and the child has rounded corners applied to it, it seems that the child is padded left and top equal to the parent border width. Workaround is to place the child inside another child of the parent. No need to say this only happens in IE.

    October 8, 2013 4:37 am

  14. Nate Balcom

    I just found your website. Let me just say that it’s awesome you’re doing this. As a designer/ developer designing for IE has always been stilted. I just started bouncing through your tutes. Great info! I’ll be passing this site on. Keep up the good work.

    November 8, 2013 2:21 pm

  15. great bot tool

    Hi all, here every person iss sharing these kinds of
    know-how, therefore it’s nice to read this webpage, and I used to go to see this webb site every day.

    June 17, 2014 4:51 pm

  16. water heater repair livermore

    Every weekend i used to pay a visit this web page, for
    the reason that i wish for enjoyment, since this this website conations in fact
    fastidious funny information too.

    July 4, 2014 10:10 am

  17. Cleveland

    What’s up it’s me, I am also visiting this
    web site daily, this web page is really pleasant
    and the people are in fact sharing fastidious thoughts.

    July 5, 2014 11:42 pm

  18. pebble smartwatch for iphone

    Really no matter if someone doesn’t be aware of afterward its up to other users that they will assist, so here it happens.

    July 15, 2014 2:46 am

  19. Teena

    I see a lot of interesting posts on your page. You have to spend a lot of time
    writing, i know how to save you a lot of time, there is a tool that creates
    unique, google friendly articles in couple of minutes,
    just search in google – k2 unlimited content

    July 17, 2014 8:44 am

  20. http://ethanbtow.tumblr.com

    What’s սp friends, its impressive post гegarding tutoringand fսlly explained, ҟeep it up
    all the time.

    July 19, 2014 8:01 pm

  21. Pleasanton legal advisor

    This piece of writing will assist the internet visitors for setting up new
    webpage or even a weblog from start to end.

    July 21, 2014 8:54 am

Continuing the Discussion

  1. CSS3 PIE 2 and WordPress integration | Peter R Knight

    [...] new release of CSS3 Pie has been announced, PIE 2.0 Beta 1. It comes with lots of goodies such as a bit of background size support and rgba support in simple [...]

    February 5, 20131:32 am
  2. Why you should Stop Using Internet Explorer Today!

    […] Today’s Internet Explorer 10 is a completely different browsing experience that closely follows W3C web standards. More so than even my beloved browser Firefox which still uses moz css extensions to handle how certain things are displayed such as gradients, rounded corners, padding, flex, etc. I just finished up a project that needed to be compatible down to IE 7 and the 2 browsers that threw the the least amount of issues were IE 9 & IE 10. […]

    November 8, 20132:24 pm

Some HTML is OK

or, reply to this post via trackback.