MSHTML fallback for data uri:s

StackOverflow https://stackoverflow.com/questions/7481155

Question

My site uses data uri:s to reduce the number of HTTP requests to my site. The problem is that data uri:s don't work in IE7, a browser that we have to support (No, we don't need IE6). I've followed Stoyan's guide and actually gotten it to work, but after a recent Microsoft security update (KB2544893, as descibed in a comment on the original article) the fallback seems to have stopped working.

The comment referenced above suggests I should try sending the MSHTML file with Content-Type message/rfc822, but I can't get this to work either, and I've tried multiple different ways over a course of several hours.

So my question is this: Can you get the technique described by Stoyan to work somehow? I would really appreciate a working example to convince me that it truly is possible.

Was it helpful?

Solution 2

I got in contact with Stoyan Stefanov (the original author of the technique), and he fixed his original example so it now works. Simply adding "message/rfc822" as content-type was all that's needed.

Fixed example: http://www.phpied.com/files/datasprites/testhover2.html

I asked him to post a comment here so I could award the points, but he didn't want to.

OTHER TIPS

Personally I would use conditional styles. In your main markup - start it as follows:

<!DOCTYPE html>
<!--[if IE 7]>    <html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8]>    <html lang="en-us" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->

In your css you can now do:

.myClass {
      background-image: url(/*DATAURI GOES HERE*/);
}

and

.ie7 .myClass {
      background-image: url(fallback-image.png);
}

UPDATE

Further to the comments below, if you're concerned around IE7 performance - a reliable approach would be to make your IE7 fallback image a sprite.

That way you're only making 1 additional HTTP call for IE7 users:

.ie7 .myClass {
      background-image: url(fallback-sprite.png);
      background-position: 150px 15px;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top