For the past three years, 24 ways has been the Advent calendar of choice for web developers. This year started off with an excellent article and script by Drew McLellan dealing with PNGs in IE5.5 and 6.
If you work with PNGs or plan to, this is a very concise and informative article. It quickly describes how PNG transparency works, outlines the problem with IE 6 and below, provides a solution, and details the limitations of this solution. I really can't recommend it enough.
- Works with both inline and background images, replacing the need for both sleight and bgsleight.
- Will automatically apply
position: relativeto links and form fields if they don't already have position set. (Can be disabled.)
- Can be run on the entire document or just a selected part where you know the PNGs are. This is better for performance.
- Detects background images set to
no-repeatand sets the
scaleModeto crop rather than scale.
Since we use PNGs quite a bit at theMechanism, SuperSleight was of great interest to us, particularly in the London office. When I looked at the code, however, there was one thing I didn't like—to change two of SuperSleight's properties required changing values hard-coded in the object. To change the third required a separate call to the
To make SuperSleight easier to implement for my colleagues in London, I added three parameters to the
run methods of the supersleight object. Our version of SuperSleight (which I'm calling 1.1.0) is available here and partial instructions on how to use it are below. The primary documentation on SuperSleight is still Drew's 24 Ways article. You can see SuperSleight 1.1.0 in action here.
How to Use
- Download SuperSleight and unzip. Upload supersleight.js and x.gif to your webserver.
- Add the following code to the <head> element of any page that contains PNGs:
<!--[if lte IE 6]>
That's it! By default, SuperSleight will run on page load, look for a transparent GIF named x in the same directory as supersleight.js, apply relative positioning to anchor and input elements, and process every PNG on the page. To change any of these default behaviors, open supersleight.js and edit or remove line 17:
The init method of the supersleight object takes three optional parameters:
- Boolean value to apply relative positioning to anchor and input elements. Pass false to leave the elements as they are.
- String ID of an element to limit SuperSleight's operations to.
To see these parameters in operation, plese view our SuperSleight demo in IE 6 or less.
To call SuperSleight from a script, use the
run method of the supersleight object. This method takes the same three optional parameters as the