4

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.

isNaN1247
  • 17,793
  • 12
  • 71
  • 118
Emil Stenström
  • 13,329
  • 8
  • 53
  • 75
  • Can you confirm what web server you're running? Also can you confirm that you're serving the file with an .mht extension rather than .css? – isNaN1247 Sep 28 '11 at 20:07
  • I'm happy if someone can get this method to work in ANY way, on ANY webserver out there. If I have one working version I can easily interpolate to my own setup (which is nginx/Django). Yes, I've tried setting the filetype to .mht without success. – Emil Stenström Sep 29 '11 at 10:38
  • So if you're using that extension... can you open up Firebug within Firefox or Chrome Dev Tools and confirm what comes back in the HTTP Headers for your request to "yourfile.mht" ? - If it says Content-Type: message/rfc822 then you have categorical proof that it will not work. As you've done literally everything mentioned in each article on this. – isNaN1247 Sep 29 '11 at 11:25
  • This question is about finding someone knowledgeable that tries things and confirms of denies if it works or not. I know that it doesn't work in my setup already. – Emil Stenström Sep 29 '11 at 12:10
  • 1. The only documented solution for this (that I can find on Google) is the one you've linked to. 2. That solution requires that you ensure that the response header 'Content-Type' says 'message/rfc822' - does it? 3. The article also states that you should use a file extension of 'mht' - you've said that you do. 4. If both 2 and 3 are followed, then there is no other documented solution available and it therefore does not work. More importantly, any web developer would tell you this is a bad, non-compliant 'solution/hack' even if it did work (i.e. something that is broken by a windows update). – isNaN1247 Sep 29 '11 at 12:21

3 Answers3

3

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;
}
isNaN1247
  • 17,793
  • 12
  • 71
  • 118
  • That would mean that the slowest browser, IE7, would get no benefit at all from this optimization. – Emil Stenström Sep 20 '11 at 11:58
  • 2
    Based on usage statistics for IE7 I would say that the benefits gained from less Development/Maintenance costs outweighs the cost to IE7 users having a less performant experience – isNaN1247 Sep 20 '11 at 13:56
  • We sell a service, claim to be IE7 compliant, and have about 5% IE7 users. We have about 20.000 monthly users, which means 1000 users that will have IE7. What I'm asking for here is a way to help those 1000 users have a better experience. – Emil Stenström Sep 20 '11 at 22:17
  • 1
    IE7 compliance I get - and you're already there by using an image fallback. However you cannot make IE7 something its not: by that, I mean even if you make data-uris work with a hack of some kind - your IE7 users will still have worse performance due to its below-standard rendering capabilities and JavaScript engine - you can't swap those out, so you cannot truly achieve what you want. If you're really worried about performance in IE7 - use a sprite image, which then means there is only 1 HTTP request extra for your IE7 users (I've updated my answer to include this). – isNaN1247 Sep 21 '11 at 06:58
  • We have considered sprite images. The problem with them is that they are a nightmare to maintain. "- Can you make that icon a little bit larger?", "- Yes, I'll just rebuild the whole sprite". I will probably fall back to either individual images or sprites, but not before I know that the MSHTML technique is impossible. It provides the same performance characteristics as data uris, using the same basic idea (base64 encoding), which makes it as easy to maintain. – Emil Stenström Sep 22 '11 at 08:58
  • sending them .mht files will **not** improve their experience. Just serve those poor people images. // And, preferably, images with "update your IE" ads ;) – c69 Sep 29 '11 at 07:02
  • @c69: Yes, it will improve their experience. Fewer HTTP requests is one of the top client side performance tricks there is. Although I agree it won't improve their experience as much as them upgrading... But that's not very likely is it? ;) – Emil Stenström Oct 02 '11 at 10:02
  • @Emil, i don't know what could be a reason other than corporate stupidity to use IE7, because upgrade to IE8 is **free**. And both browsers are available on winXP and not available on earlier systems (like win2000). – c69 Oct 02 '11 at 14:45
3

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.

Emil Stenström
  • 13,329
  • 8
  • 53
  • 75
  • Stoyan, the man! // yet, this does not remove my point about using this hack in general. – c69 Oct 02 '11 at 14:47
0

http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ here's your solution i think

albert
  • 8,112
  • 3
  • 47
  • 63
  • 1
    No. The article I link to in the question is the follow-up to the one you link to. Try that demo in IE7 and you'll see it doesn't work. – Emil Stenström Sep 27 '11 at 08:47