Printable View
My understanding is that alpha PNG transparency has been fixed in IE7. I see that there is a slew of hacks for IE. What's the state of the hack for doing this? I don't care about IE5.5 and below. JS OK. I'm not thrilled about hacking anything, but absolutely need to use an alpha transparency PNG.
Up until IE7, there has been no fully native support for PNG alpha channel transparency in Internet Explorer. However, since IE5.5 there has been some support in the form of proprietary filter called the AlphaImageLoader. Internet Explorer filters can be applied directly in your CSS (for both inline and background images), or by setting the same CSS property with JavaScript.
CSS:
JavaScript:Code:img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
Code:img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";
We get a lot (and I do mean a lot) of complaints about the lack of alpha channel support for PNG in Internet Explorer. Quite right too! This is an optional part of the PNG specification but it is the part that actually makes PNG more useful that other image formats. I am hopeful that we may be able to address this at some point in the future but at this stage we can't say exactly when or offer any guarantees. If anyone does offer you a guarantee about a feature shipping in a future piece of software then you should be very suspicious.
Unfortunately we can't turn back time and add this functionality. Or maybe we can!
There are workarounds that make use of the AlphaImageLoader filter supplied with Internet Explorer. Now using this filter in its raw form involves adding script to the page. I know many web designers are uncomfortable with adding script as it also can make supporting these web pages more difficult particularly if they don't have a programmer to turn to when things stop working. Fortunately a few clever people have wrapped up the functionality in a component known as a behavior so all a web designer needs to do is add a style for images to their page
and place the pngbehavior.htc file with the page on their server.Code:img { behavior: url("pngbehavior.htc");}
While Internet Explorer for Windows 6 (IE6) and previous versions of IE don’t support PNGs’ alpha-transparency feature, all popular browsers can display PNGs.
While IE6- doesn’t explicitly support alpha-transparency out-of-the-box, if you will, there is a workaround that ensures PNG’s cross-browser compatibility.
Microsoft has a plethora of proprietary visual filters and transitions that are available to IE4+. These filters are designed to apply various multimedia affects (transition wipes, light effects and so on) to images in a web page that are viewed with IE. One of these image filters — AlphaImageLoader — lets you display a PNG with alpha-transparency in IE6.
You can employ this filter within the HTML of your page by creating a div element and embedding into it a bit of CSS:
The key property here is the filter property. While filter is not valid CSS, it does allow you to apply the AlphaImageLoader filter to the image specified in the parentheses. However, since it isn’t standards-compliant, you may wish to apply this property only as needed (i.e., only when the page is being displayed in IE6-).Code:<div style=”position:relative; height: 188px; width: 188px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/image.png',sizingMethod='scale');”></div>
If you browse to a Web page that contains an image that has a transparent background in Portable Network Graphics (PNG) format, the image background may appear to be gray rather than transparent.
Those who work with PNG files can use the AlphaImageLoader filter, as demonstrated in the following example:
Code:<html>
<head></head>
<body bgColor="blue">
<!-- This DIV is the target container for the image. -->
<DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.png', sizingMethod='scale');" >
</DIV>
</body>
</html>
SuperSleight adds a number of new and useful features that have come from the day-to-day needs of working with PNGs.
- Works with both inline and background images, replacing the need for both sleight and bgsleight
- Will automatically apply position: relative to 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-repeat and sets the scaleMode to crop rather than scale.
- Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.
Download SuperSleight
Implementing SuperSleight
Getting SuperSleight running on a page is quite straightforward, you just need to link the supplied JavaScript file (or the minified version if you prefer) into your document inside conditional comments so that it is delivered to only Internet Explorer 6 or older.
Supplied with the JavaScript is a simple transparent GIF file. The script replaces the existing PNG with this before re-layering the PNG over the top using AlphaImageLoaded. You can change the name or path of the image in the top of the JavaScript file, where you’ll also find the option to turn off the adding of position: relative to links and fields if you don’t want that.Code:<!--[if lte IE 6]>
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->
The script is kicked off with a call to supersleight.init() at the bottom. The scope of the script can be limited to just one part of the page by passing an ID of an element to supersleight.limitTo(). And that’s all there is to it.
Including PNG Transparency in IE6
One available method for doing this is employing Angus Turnbull’s .htc script:
- First, download the .htc script at TwinHelix Designs. HTC is a scripting language only usable by Internet Explorer (because it was created by Microsoft) and this specific script contains applies the AlphaImageLoader filter to all images within a web page.
- After downloadign the script, upload the script to your Web server.
- Then, create (or download from TwinHelix) a blank gif file. This image file is 1×1 pixel with the color set as transparent. (Back in the 90s, these were called these gems "single pixel GIFs"). Within the .htc script, change the line that references the blank.gif file so that it points to the gif’s location on the server.
- Create a separate CSS file (we’ll name it ie.css), and include within in the following single line, referencing the location of the .htc file:
The behavior property let’s you attach a script to some selector (in this case, all img elements). So, this CSS file attaches the .htc file to all of your images, thus applying the desired filter effect to every image within a web page.Code:img {
behavior: url(iepngfix.htc);
}
- But, we only want to load this CSS file when the page is viewed in IE6-. To do this, just add the following conditional comment to your page’s header:
Conditional comments like these are understood by IE. What the comment says is, “if the browser is IE6 or below, then read the lines within the comment tags. Otherwise, ignore them.” Conditional comments provide a convenient way of applying IE-specific HTML or CSS. Here, the ie.css stylesheet loads only if the page is displayed in IE6-, letting you apply the non-compliant CSS only when it’s absolutely necessary.Code:<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen"
href="ie.css" />
<![endif]-->