Scott Watermasysk

Still Learning to Code

Protocol-Relative Css With Ie on S3 and CloudFront

Protocol relative resource allow you to avoid writing code which checks for http:// or https:// (or simply defaulting to one or the other). The benefit, besides less code and complexity, is your visitors will have the resources optimally served to them (fast and not secure or slower and secure).

This has been around forever (in terms of the web) and every browser handles it perfectly for JavaScript, CSS, images, etc…..well, not quite everyone. As usual, someone invited Internet Explorer to the party and they had to go screw things up.

As was mentioned in Paul Irish’s article above, IE7 and IE8 download the file twice. Annoying, but if you are going to use IE 7 or 8 that’s what you get.

Unfortunately, I cam across another baffling issue.

We host most of our external resources on S3 and CloudFront. A link to a CSS file looked like this:

<link href="//random.cloudfront.net/directories/file.css" type="text/css" media="all" />

Now I would have expected IE7 and IE8 to download the file twice. Again, annoying, but what can you do?

Unfortunately, instead of just requesting the file at both http:// and https:// it appends current domain name to the file.

So instead of requesting http(s)://random.cloudfront.net/directories/file.css it instead requests http://mydomainname.com/random.cloudfront.net/directories/file.css.

Anyway, not much you can do to fix it except for denying IE7/IE8 or appending https:// for CSS requests.

Hopefully this post saves someone else out there many hours of head shaking and fist pumping.

UPDATE: Just to clarify, everything appears to work perfectly fine on non-ssl requests. It is via SSL where everything goes in the toilet.