I’ve been playing around with CSS3PIE the last couple of days; it allows support for various CSS3 features in Internet Explorer 6 to 8, such as box-shadow, border-radius and linear-gradient. This post shows how to prevent IE from downloading the PIE.htc file twice on the first page request, and how to prevent IE9+ from downloading it at all.
Stop Internet Explorer downloading CSS3PIE twice
On the first page request, IE will download CSS3PIE twice. The second request is a full download and not a 304 request where it serves the file from the cache if the timestamp is the same.
I found this topic in the CSS3PIE forums where someone came up with a solution, which is to include the pie.htc file as a CSS stylesheet first; subsequent requests for the htc file from the actual stylesheet then use this cached file.
Add this to the document <head>, substituting /path/to/pie.htc for the actual path and filename of your pie.htc file:
<!--[if lt IE 9]><link href="/path/to/pie.htc" rel="stylesheet" type="text/css" /><![endif]-->
The suggestion on that forum just made the conditional comment be <!–[if IE]> but in the next section below I’ll show how to prevent IE9+ from downloading the htc file at all, so we only need IE8 and lower to download the file as a CSS file.
From the forum post: Note that it is necessary to lie to IE about the pie.htc data type being "text/css". Type="text/x-component" will not work. Neither will type="text". IE must "think" pie.htc is a stylesheet for the trick to work.
Note that on the first page request the file will now download only once. If you then reloaded the page using F5, IE will still make a double request for the file but these will be 304 requests and no data will actually be transferred.
Prevent IE9+ from downloading CSS3PIE at all
The default method to include CSS3PIE into a CSS definition is like so:
.box {
/* snazzy CSS3 effects here */
behavior: url(/path/to/pie.htc);
}
The only catch with this is that IE9+ will still download the file, even though it won’t execute any of the code in it. To prevent IE9+ from downloading it, apply a second CSS definition below the first one (and you’ll need to do this for every CSS definition you use pie.htc in) like so:
:root *> .box {
behavior: none;
}
This uses a browser hack provided by Paul Irish here, which applies the styles within the definition to all browsers other than IE6, 7 and 8. There was another method for using 9 in the property itself, but I couldn’t get it to work with behavior and url() so only IE 6/7/8 downloaded the file and IE9 didn’t.
Alternatively you could use conditional comments to include a specific style sheet for IE < 9 and apply the htc file that way.
An update regarding support in IE9
Shortly after posting this, "wonderyak" added a comment that IE9 doesn’t support all CSS3 stuff. I had a quick look at the CSS3PIE Version 1 Beta 4 release notes and it points out that:
Tweaked detection of IE9 to perform rendering in compatibility and quirks modes but disable rendering in IE9 standards mode.
So if you are using IE9 and your code is in quirks mode you’ll still want to include the HTC file. So change the conditional include from <!–[if lt IE 9]> to <!–[if IE]> and don’t use the second CSS definition.