JasonDaly.name

MooTools SuperSleight Implementation for IE .png Transparency Issue

Recently I had to slice converted a site mockup to XHMTL and CSS. Part of the implementation required that the width of the site be what I like to call “static-variable width”.

The width of the site is not dependent on the width of the browser as a fluid layout is, but a slider control is available to the user to grow or shrink the width of the site as they desire.

Due to the need for this flexibility and the heavy image work used for the background of many of the DOM elements, .png files with transparency needed to be used in many places.

Things really looked great, except of course in IE6.

There are many different “solutions” to this problem, all which revolve around the Internet Explorer AlphaImageLoader Filter. After a lot of research and testing of different implementations, I settled on the SuperSleight. I like this technique for a variety of reasons

• It’s very simple to implement
• It degrades gracefully
• It doesn’t invalidate a site’s XHTML or CSS

I found that allinthehead has implemented a jQuery plugin. Since I’m personally more a fan of MooTools, I ported the plugin to MooTools, extending the native Element class.

Element.implement({
    superSleight: function(settings) {
        var settings = $H(settings);
        settings.extend({
            imgs: true,
            backgrounds: true,
            shim: '/_img/png_fix_blank.gif',
            apply_positioning: true
        });

            if (Browser.Engine.trident && Browser.Engine.version < 7 && Browser.Engine.version >= 4) {
                $(this).getElements('*').each(function(elem) {
                    // background pngs
                    if (settings.backgrounds && elem.getStyle('background-image').match(/\.png/i) !== null) {
                        var bg = elem.getStyle('background-image');
                        var src = bg.substring(5, bg.length - 2);
                        var mode = (elem.getStyle('background-repeat') == 'no-repeat' ? 'crop': 'scale');
                        var styles = {
                            'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')",
                            'background-image': 'url(' + settings.shim + ')'
                        };
                        elem.setStyles(styles);
                    }

                    // image elements
                    if (settings.imgs && elem.match('img[src$=png]')) {
                        var elem_size = elem.getSize();
                        var styles = {
                            'width': elem_size.x + 'px',
                            'height': elem_size.y + 'px',
                            'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + elem.getProperty('src') + "', sizingMethod='scale')"
                        };
                        elem.setStyles(styles).setProperty('src', settings.shim);
                    }
                    // apply position to 'active' elements
                    if (settings.applyPositioning && ['a', 'input'].contains(elem.get('tag')) && elem.getStyle('position') === '') {
                        elem.setStyle('position', 'relative');
                    }
                });
            }
    }
});

Some Notes

1. Make sure to change the path to your .gif file. This .gif file should be a transparent 1x1 px image. This is what the Alpha ImageLoader uses to fix the transparency issues with the .png files
2. I’ll call this code stable since I haven’t personally had any issues with it yet. If you have any changes you’d like to recommend, post a comment or send me a message
3. With the Alpha ImageLoader Filter for IE, there is no support for repeating backgrounds or background positioning. As a tip, on the site I used this code for, whenever I needed to mimic the top right CSS background-position property, I found increasing the width of these .png images by putting transparent pixels as padding in the left side of the image itself can correctly force the image into position for IE6 without breaking the layout in good browsers.