PNG Transparency for Internet Explorer (IE6 and Beyond)

Like GIFs and JPEGs, PNG images are ideal for web use. Like GIFs, the PNG is great for displaying small images with few colors, like logos and icons. Also, PNGs sport a few advantages over GIF images. Most notably, they support alpha transparency.

What is alpha-transparency? GIF files are only capable of displaying a pixel as either completely transparent or completely opaque: this is known as binary transparency. When an image contains alpha layers, however, parts of an image can be partially transparent. You can specify a level of transparency from 0 to 255. Below is an image with layers of varying transparency:

PNG with transparent layers

PNGs thus have the potential for creating some interesting effects on a web page, like translucent background images and drop-shadows. But despite their advantages over GIFS, PNGs aren't nearly as popular as GIFs web design, primarily because of the impression that PNGs don't enjoy wide browser support.

This view on PNGs is a bit of a misconception.

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:


<div style=”position:relative; height: 188px; width: 188px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 
(src='images/image.png',sizingMethod='scale');”></div>

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-).

By combining this method, developers can build rich image-based designs with alpha transparency like they would for modern browsers like Safari, Firefox, and Internet Explorer 7 that all supports PNG alpha alpha transparency natively.

How to Include PNG Transparency in IE6

One available method for doing this is employing Angus Turnbull's .htc script:

  1. 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.
  2. After downloadign the script, upload the script to your Web server.
  3. Then, create (or download from TwinHelix) a blank gif file. This image file is 1x1 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.
  4. 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:
    
    img { 
     behavior: url(iepngfix.htc); 
    }
    

    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.

  5. 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:
    
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" media="screen" 
    href="ie.css" />    
    <![endif]-->
    

    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.

While a rather convoluted way to get transparent PNGs working in your web pages (although less convulted than my previous method), it does provide a method that is as standards-compliant as possible, giving you the freedom to include the beauty of semi-transparent layers in your designs.

The Safari Browser Offensive

Safari PC

The New Browser War got a little interesting. It’s no longer defined between Firefox or Internet Explorer.

During Steve Jobs’ speech at the Worldwide Developers Conference in San Francisco this month, he announced that the new version of Safari, Apple’s Web browser, will run on Microsoft’s Windows opersating system. In fact, public betas are available now.

This reminded me of the time when Microsoft stopped its support of Internet Explorer for Macintosh. At the time, I could understand Microsoft’s pull out.

Microsoft spent a lot of time and money in making a totally different, better browser from Internet Explorer for Windows for their competition. If a Windows user ever sat down and surfed with mac IE, I’m sure they wondered why Win IE wasn’t as slick and possibly think about buying a Macintosh. (Perhaps.)

Now Apple has decided to take its browser to Microsoft’s turf. In the time it took Microsoft to go from Internet Explorer 6 to 7, Apple is pushing their browsr onto another platform. However, I’m not completely sold on the idea for the long-term.

While having Safari on a PC is a great idea as a low-cost way to lower the barrier to getting people to switch from PCs to Macintosh, I’m not too sure about it’s long time presence. Nonethless, I welcome the competition for my desktop and my clients’. 

Having a PC version of Safari around should make convincing clients to stick to Web standards easier.

Who’s In the Mix?

MIX07 Graphix

I’m packing up and getting ready to head to Las Vegas for Microsoft’s MIX07, dubbed a 72-hour conversation with “some of the most successful and innovative practitioners on the Web”.

This is the first time I’m attending. I’ve been anxiously awaiting this event after hearing about last year’s event. 

Anyone else planning on attending?