Monday, December 15th, 2008
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:
- <!--[if IE 6]>
- <script src="DD_belatedPNG.js"></script>
- DD_belatedPNG.fix('.png_bg'); /* EXAMPLE */
- /* string argument can be any CSS selector */
- /* using .png_bg example is unnecessary */
- /* change it to what suits you! */
- < ![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.
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
- 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
- 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
Drew also implemented border-width in a way that gets it working in IE 6 too.
Posted by Dion Almaer at 7:24 am