Monday, December 15th, 2008
PNG support in IE6 that reclaims background repetition and position
Category: JavaScript, Library
You just do this:
HTML:
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, andelement.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.
Related Content:
4.4 rating from 32 votes
It seems that PNG images fixed by VML are not cached.
http://cfis.savagexi.com/2008/06/22/a-new-take-on-transparent-pngs-in-ie6-performance-and-vml
Interesting comment, but all the links are broken on the blog post you are pointing out.
steida, according to Fiddler’s output on my end, using the BackgroundImageCache patch works wonders on caching the images.
If I remember correctly the other solutions aren’t very kind on your memory usage. How does this one compare?
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.
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.