CSS3 PIE is a utility for Internet Explorer which adds support for some of the most useful CSS3 properties missing from older versions of the browser, such as border-radius, box-shadow, border-image and multiple background images. I don’t wish to duplicate what’s in the online documentation in this post, just a couple of gotchas when starting with CSS3 PIE.
Use the full path to the pie.htc file
When using the PIE utility, the online documentation says to add this to the CSS:
behavior: url(PIE.htc);
The catch with this is that IE actually requires the full path to the PIE.htc file for it to download it. If the above is used, IE will attempt to download /PIE.htc. If a relative path such as ../path/PIE.htc is used, IE will attempt to download /path/PIE.htc
So if your PIE.htc file is at e.g. /path/to/PIE.htc then the CSS needs to be like this:
behavior: url(/path/to/PIE.htc);
Note that this is actually talked about in the Known Issues section of the documentation but it’s incorrect in stating that the path is relative to the current HTML document. From my own testing IE always makes it relative to the root directory (tested IE6 through IE9).
Add the type to the .htaccess file
The online documentation does mention this particular point but I’ve added it here to save myself trying to locate it in the manual next time I need to add PIE to a website.
IE will download the htc file but won’t do anything with it unless the MIME type is set up correctly. Add the following to your .htaccess file:
AddType text/x-component .htc
And you might want to add deflate compression to it as well:
AddOutputFilterByType DEFLATE text/x-component
And possibly an expires header to some time in the future if you do that for some mime types:
ExpiresByType text/x-component "access plus 1 months"
Stop IE downloading the PIE file twice
Unfortunately IE will download the file twice on the first page request. My earlier blog post “Stop Internet Explorer from downloading CSS3PIE twice” looks at a solution for this problem.
It also looks at how to prevent IE9+ from downloading the file at all; if the CSS3 properties you want to support are already supported in IE9+ then you don’t need it to download the file at all.
Other known issues and useful tips
Check out the Known Issues section of the CSS3PIE documentation for more tips and other issues.
