2

I need to create a page with all images and CSS in it, so it would be only one file.

I know that there is something like MHT (IE web archive), BUT there is problem. It works only in IE and Opera, not in FF. And i need my page to be working in all IEs (6+), Opera and FF. I know there is a way to encode my images in base64 and I also know, that IE 6 and 7 does not support data URLs. I've seen Dean Edward's trick for IE 6 and 7 but it works only with PHP support. And I can't use PHP, so this isn't working for me.

So, is there any way to create this kind of page? Please don't give me answers like "who is using IE6 today" or "install chrome frame". I know all this, but I need it to be working this way.

Thanks for the answer!

isNaN1247
  • 17,793
  • 12
  • 71
  • 118
Pirozek
  • 1,250
  • 4
  • 16
  • 25

4 Answers4

5

There is no cross-browser way to integrate all resources into one HTML file.

Your best bet is probably to serve a .MHT file for IE, and one with data: URIs for Firefox et al.

In some situations, a viable compromise may be serving a ZIP file that contains all resources, referenced using relative URLs. The user just has to unpack it, and can view it locally.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • Thanks, now I need to figure out a way, how can i serve .mht with javascript :) – Pirozek Apr 14 '11 at 15:54
  • @Pirozek you're welcome. Check out @Willem's answer - maybe it's possible in a truly cross-browser way with `canvas`. It's just going to be slow as hell, and of course requires JavaScript – Pekka Apr 14 '11 at 15:55
3

I can only think of one solution that will work in all browsers, and that is building an image from html elements, but it will be very much work to do so (per pixel or other strategy). Maybe jQuery can help a little. Also this might slow IE6 down (even more than normal...)

example: http://jsfiddle.net/huSq3/1/

I know it isn't much of a solution but I had to mention it. Now I'm thinking of it maybe you can use the canvas tag in combination of this javascript library for IE and draw the images to that via javascript.

Willem
  • 5,364
  • 2
  • 23
  • 44
  • I've given this +1 because I think it is the only solution. You'd need to include libraries like jquery and raphael (and given the requirements they'd need to be inline -- yuk!), and then write javascript to build the graphics manually in the browser. It might work, but I agree, it'll probably be unusably slow in IE6. – Spudley Apr 14 '11 at 13:57
  • Hmm, interesting idea, but probably indeed too slow in IE. Is there any way to add `canvas` support to IE6? Then you could feed the image from base64 using JavaScript... Would be slow as well but maybe better than nothing – Pekka Apr 14 '11 at 14:07
  • This is clever and *could* work. It would require JavaScript of course, but it's not impossible – Pekka Apr 14 '11 at 15:55
1

Maybe you could use html conditional comments to decide which solution to use between MHT, data url, or any other partially supported solution...

greg0ire
  • 22,714
  • 16
  • 72
  • 101
-1

If you are OK with the base 64 string in the image tag, then just hardcode it, then you do not need php

Kenneth Jakobsen
  • 458
  • 3
  • 11