CSS3 PIE: CSS3 decorations for IE

PIE 2.0 beta 1 released

Jason Johnston — Mon, 28 Jan 2013 16:12:35 +0000

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 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!

PIE 2′s new loading mechanism

Jason Johnston — Fri, 25 Jan 2013 20:11:35 +0000

One of the guiding principles in the development of CSS3 PIE has always been to make it as simple to use as possible. That’s why it was designed as only a single standalone .htc file, without any external dependencies. Copy a single file and reference it — can’t get much simpler than that!

However, having a single monolithic file has posed some other problems. Especially with the introduction of IE9 compatibility which required entirely new renderers that use SVG instead of VML, PIE.htc grew to contain a lot of code that isn’t used by whichever browser is currently downloading it. IE9 has to download all the code for parsing and rendering border-radius and box-shadow using VML, for example, even though it has a native implementation. Similarly, IE6-8 have to download the IE9 SVG rendering code which they cannot use.

To make this even worse, IE has a strange bug that sometimes causes the .htc file to be fully or partially downloaded more than once, so the hit can be as much as doubled in some cases.

It was clear that the simplicity of a single file wasn’t worth this performance hit, so while I was designing the next generation of PIE one of my main goals was to implement a conditional loading system which didn’t sacrifice simplicity of use. I’m going to describe what’s been implemented so you know what to expect in the upcoming PIE 2.0 (first beta will be released soon!), and to solicit your feedback on it.

What’s different?

Firstly, PIE.htc is now very small. Like 2KB small. All it contains is enough logic to figure out what secondary JS file to load and where to load it from. So even if the double-htc-download bug happens, it’s only a tiny thing being downloaded twice.

The secondary JS files contain all the rest of the logic for parsing and rendering the CSS3 styles. There are currently two logic files: PIE_IE678.js and PIE_IE9.js, containing only the code needed by IE6-8 and IE9 respectively. The .htc file loads only the one appropriate for the current browser. (It’s possible that in the future these can become even more granular, for instance minimal builds that don’t include code for unused CSS3 properties.)

These secondary logic JS files will also double as the files for PIE JS Edition — just include them directly using conditional comments so only the appropriate one is loaded.

Can we get some numbers?

Let’s compare the difference in total download size. These are actual numbers from loading the css3pie.com homepage in IE:

Version	Request	Size
PIE 1.0: All IEs	PIE.htc first request	8.27 KB
	PIE.htc second request	40.35 KB
	Total	48.62 KB
PIE 2.0: IE6-8	PIE.htc first request	2.00 KB
	PIE.htc second request	0.17 KB
	PIE_IE678.js	37.29 KB
	Total	39.46 KB
PIE 2.0: IE9	PIE.htc first request	2.00 KB
	PIE.htc second request	0.17 KB
	PIE_IE9.js	25.80 KB
	Total	27.97 KB

So we’re seeing about a 9 KB smaller total download in IE6-8, and 20 KB smaller in IE9. Of course that’s not the entire story — there’s the extra HTTP request for the JS file to take into account. So let’s take a look at the actual network timeline, on a simulated slow connection. Here’s PIE 1.0 in IE9, loading css3pie.com/blog:

And here’s PIE 2.0 with the new loading system:

As you can see, even with the extra HTTP request the total download time has still improved by more than a second. But what’s even more interesting is that while IE waits for the .htc file before firing document ready, it does not wait for the secondary .js file, so it fires a whole 6 seconds earlier! This means your other scripts that wait for document ready can start running much earlier, making your page feel snappier.

Customizing the loading path

When PIE.htc loads the secondary files, by default it loads them from the same server path as PIE.htc itself. This keeps things as simple as possible for users; as long as you keep the distribution files together in the same directory, you’re set.

However, for extra flexibility I’ve also added the ability for you to override that location if you wish, by specifying a new -pie-load-path property on the html element:

html {
    -pie-load-path: "http://any.server/path/to/pie-js-files/";
}

The path you specify can be anywhere on any server, as the JS files are not subject to same-domain limitations. You can even choose to load them from a CDN to take advantage of caching and geolocated delivery.

Help us test!

If you have any feedback on this new loading system, good or bad, I’d love to hear it. It’s very likely that unforeseen issues could pop up once it starts being used in the wild, so getting your help testing the new system is crucial! There will be an official 2.0 beta build released in the very near future; or if you can’t wait you can build PIE yourself from the master branch on GitHub and try it out right now. If you find any issues please post them in the forums.

PIE 1.0.0 Released

Jason Johnston — Tue, 15 May 2012 14:36:07 +0000

I am thrilled to announce the release of CSS3 PIE version 1.0.0!

This release marks a major milestone: the dropping of the “beta” label. Our five beta releases have given us twenty-two months of solid real-world testing as you, the web community, have used it on your sites. You’ve really put it through its paces, given us invaluable feedback and bug reports and helped us squash the bugs, and now we are confident in saying that PIE is solid and reliable enough to no longer be called a beta product.

Compared to beta5, the final version 1.0.0 contains only a few fixes for major issues:

Fixed divide-by-zero error in box-shadow renderer
Fixed error when element is removed after hovering
Fixed error when printing in IE9
Fixed rendering when using browser zoom in IE7 and 8

In addition, we have added support for two new custom CSS properties: -pie-track-hover and -pie-track-active — setting these to false will disable PIE’s default automatic tracking of :hover and :active styles, which can give a small performance boost and prevent issues with scrollbars in IE7 (see issue 190).

See the full changelog for details.

Download CSS3 PIE 1.0.0 now!

Moving Forward…

While focusing on stability for 1.0.0, we’ve been very busy with other things too! The master branch in GitHub, which will become the 2.0.x line, has already seen major architectural improvements, several new features, and lots of fixes. We’ll start releasing this cutting-edge code in 2.0 beta releases soon, in parallel with the rock-solid 1.0.x line, so stay tuned!

PIE 1.0 beta 5 released

Jason Johnston — Thu, 08 Sep 2011 03:12:15 +0000

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!

CSS3 PIE Nominated in .net Awards 2011

Jason Johnston — Mon, 25 Jul 2011 21:20:46 +0000

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!

Happy birthday to PIE

Jason Johnston — Tue, 12 Jul 2011 16:21:09 +0000

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!

PIE 1.0 beta 4 released

Jason Johnston — Mon, 04 Apr 2011 15:59:22 +0000

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.

PIE 1.0 beta 3 released

Jason Johnston — Mon, 06 Dec 2010 15:52:09 +0000

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 ,

, and

, and	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 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! CSS3 PIE is now part of Sencha Labs Jason Johnston — Thu, 11 Nov 2010 19:09:30 +0000 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! PIE 1.0 beta 2 released Jason Johnston — Wed, 28 Jul 2010 14:15:34 +0000 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 buttons and 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

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 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!

CSS3 PIE is now part of Sencha Labs

Jason Johnston — Thu, 11 Nov 2010 19:09:30 +0000

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!

PIE 1.0 beta 2 released

Jason Johnston — Wed, 28 Jul 2010 14:15:34 +0000

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 buttons and
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