Monday, December 15th, 2008

PNG support in IE6 that reclaims background repetition and position

Category: JavaScript, Library

Drew Diller has created a helper library in the “yup, you still have to get things working in IE 6” department. DD_belatedPNG adds PNG support to IE6 that works with background-repeat and background-position.

You just do this:

  1. <!--[if IE 6]>
  2. <script src="DD_belatedPNG.js"></script>
  3. <script>
  4.    DD_belatedPNG.fix('.png_bg'); /* EXAMPLE */
  5.    /* string argument can be any CSS selector */
  6.    /* using .png_bg example is unnecessary */
  7.    /* change it to what suits you! */
  8. </script>
  9. < ![endif]-->

It is fun to see how it works:

It turns out that using another Microsoft language, VML, correctly implements the PNG format, or at least enough for our purposes.

More specifically,

  • Invoking DD_belatedPNG.fix() adds a line of CSS to the document via DOM.
  • The selector of this CSS is provided by the first argument for fix, which should be a string (such as #content div).
  • The declaration of this CSS is an MSIE-proprietary behavior.
  • The content of the behavior executes a function in the scope of each element matched.
  • The first duty of this function is to reset its own style.behavior to no longer have a value; allowing behaviors to continue unchallenged is a recipe of for CPU-eating disaster.
  • The function then examines the element’s dimensions, location, and styles using element.offsetWidth, element.offsetHeight, element.offsetLeft, element.offsetTop, and element.currentStyle
  • Using the above information, a VML <DD_belatedPNG:rect/> node is constructed and prepended (element.insertBefore) to the element. Yes, element name prefixes are valid in XHTML.
  • The VML node is absolutely positioned to follow behind the element like a lost little puppy. It copies the matched element’s z-index.

Drew also implemented border-width in a way that gets it working in IE 6 too.

Posted by Dion Almaer at 7:24 am

4.2 rating from 37 votes


Comments feed TrackBack URI

It seems that PNG images fixed by VML are not cached.

Comment by steida — December 15, 2008

Interesting comment, but all the links are broken on the blog post you are pointing out.

Comment by frenchStudent — December 15, 2008

steida, according to Fiddler’s output on my end, using the BackgroundImageCache patch works wonders on caching the images.

Comment by drewdiller — December 15, 2008

If I remember correctly the other solutions aren’t very kind on your memory usage. How does this one compare?

Comment by tlrobinson — December 16, 2008

tlrobinson, I have first and foremost concentrated on getting it to work; in other words, that is a concern of mine, but it is one that I haven’t measured yet. I couldn’t tell ya =/

I have received a few bits of feedback revolving around the performance, from devs who had previously used AlphaImageLoader. While this may sound like a subjective claim to some, the feedback was more or less, “This feels much (much) more snappy than what I was using.”

This project is really young, I think it needs time to get kicked around before it earns mass acceptance.

Comment by drewdiller — December 16, 2008

I haven’t tried it yet. But judging by the demo, this looks like it could be the best solution for the IE6/.png issue yet.

Comment by WillPeavy — December 16, 2008

Leave a comment

You must be logged in to post a comment.