PNG Transparency
With the new Internet Explorer 7 now pretty widely available, and many Windows machines being automatically updated, us web-designers can at last consider using PNGs rather than JPGs. They have their downsides (they're generally slightly larger) but they support an alpha channel which allows transparency. Many of the newer browsers (Firefox, Opera, Konqueror, Safari) have supported transparent PNGs for a while, but Internet Explorer 5 did not, and Internet Explorer 6 only just did.
So, how do we use transparency? We can make it work in all the latest browsers, including IE6 and above. We first need to realise, though, that our images must be painted as background onto elements. This is not the cleanest way of producing the pages, but in most cases the transparency is only for decoration anyway, and such elements should be invisible in non-graphical pages.
Let us take a common example, using image replacement for headers.
<h1 id="title"><a href="index.php"><span>My Webpage</span></a></h1>
Our markup is neat and, barring the span, semantic. It's a title on which we can click to return to the home page. If we are using a browser, like lynx, or a screen-reader that cannot support CSS we get a nice page that still makes sense.
The usual CSS we might employ might be something like this:
#title
{
background: url(background.jpg);
}
#title a
{
display: block;
background: url(titlegfx.png) no-repeat;
width: 300px;
height: 50px;
margin: 0 auto;
}
#title a span
{
display: none;
}
It simply puts a nice background on the title, and does the usual image replacement technique for the link. [There are of course other ways to do the image replacement, and there's lots of hacky stuff that works too, but this works for nearly every browser, despite requiring the extra span.]
If titlegfx.png is transparent, this works fine in all but IE6 - it will even work in IE7.
To make it work in IE6 we must present special CSS to the browser. We can do this with Microsoft's conditional comments. In our HTML we can put this:
<!--[if IE 6]>
<link rel="stylesheet" href="styles/ie.css" type="text/css" media="screen" />
<![endif]-->
All normal browsers will of course ignore this XML comment, but IE will recognise the commands and include the inner HTML if it matches IE6. This delivers a special IE-only CSS to the browser.
In this file we need to put some wacky IE-only commands that actually filter the graphics supplied and do it in such a way as to produce a transparent image, thereby recreating what other browsers do as standard.
#title a
{
display: block;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='titlegfx.png',sizingMethod=image);
width: 300px;
height: 50px;
}
That bizarre filter thing is what makes it all work. The sizingMethod parameter may be scale (which will stretch the image to fit the HTML element), or in this case is image which keeps it the same size as the original image.
Note that one difference is that the location of the image file in the filter is relative to the HTML file, not to the style-sheet file, unlike all other style-sheet commands.
This method will not work correctly with IE5. Of course, you could use a conditional comment for IE5 and deliver some normal CSS to make it work, and if you're really bothered about Netscape 4, you might use @import in <style> tags instead of <link>, but the more you add backwards support the longer the job gets and the bigger your files get. There is, of course, some merit in producing some style-sheets that work with mobile devices, as they seem to be becoming more and more popular these days, but unfortunately those filters don't work and most don't support native PNG transparency.
You can see the use of this technique at a website I did recently for the QMSS Conference 2007. If you resize your browser you will see the banner is made up of 3 transparent PNGs.
