codeRambler Ramblings on code, the web, and technology

Make your PNGs 32-bit
Wednesday June 13th 2007, 11:58 am
Filed under: CSS, Web development

You should always ensure any alpha transparent PNGs are 32-bit to ensure that they always display the same colour across all browsers. Recently, Firefox and IE displayed a particular 24-bit alpha transparent PNG differently. Changing the PNG to 32-bit fixed this and both browsers rendered the PNG the same.

I have also experienced this with Safari 2 on MacOSX – again, switching to 32-bit PNG fixed the problem.



How do I use alpha transparent PNGs across all browsers?
Saturday May 05th 2007, 10:40 am
Filed under: CSS, Web development

Many web developers have shunned the PNG image format in the past. For some this has been because of a perceived lack of support for alpha transparency (described formally as alpha compositing) in Internet Explorer. Here are some directions on how you can use alpha transparency successfully across all browsers – and specifically IE 6 for Windows.

The examples below rely on the following CSS code (described below):

<style type="text/css">
  #demo1 {
    width: 250px;
    height: 100px;
    background: url(images/logo.png) transparent 0 0 no-repeat;
  }
</style>
<!––[if lt IE 7]>
<style type="text/css">
  #demo1 {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
        (enabled=true,sizingMethod=scale,src=/images/logo.png);
  }
</style>
<![endif]––>

The first block of CSS sets a background image on an element with the id “demo1″ (typically a div, span or img) for all browsers. This works fine for everything else, but doesn’t work with IE prior to version 7.

The second block targets just these “broken” browsers through use of a conditional comment. This second block uses the filter property to set up a proper alpha transparent version of the png. Read more about this here at the MSDN site.

In the following example the CSS above would show the logo.png with alpha transparency as the background to a div:

<div id="demo1"></div>

This next example shows that you can display a png with alpha transparency by targetting a transparent image:

<img src="transparent.gif" id="demo1" alt=""/>

There are plenty of variations of this technique. All the examples above are considered “standards friendly”. This final example shows the same CSS simplified (but not passing validation):

<style type="text/css">
  #demo1 {
    width: 250px;
    height: 100px;
    background: url(images/logo.png) transparent 0 0 no-repeat;
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
        (enabled=true,sizingMethod=scale,src=/images/logo.png);
  }
</style>

If you are putting the CSS above into an external stylesheet, then be aware that the path to the logo.png when used as the background image is relative to the CSS file, but the path to logo.png when used in the filter is relative to the enclosing HTML file. This can cause some confusion.

On a related note… you should always ensure your alpha transparent PNGs are 32-bit to ensure that they always display the same colour across all browsers (specifically Firefox and IE displayed a 24-bit alpha transparent PNG differently using the technique described here – changing it to 32-bit confirmed this was the case).



Microsoft finally retires IE 5 for the Mac
Thursday December 15th 2005, 1:07 pm
Filed under: CSS, Javascript, Web development

On December 14th 2005, Microsoft quietly published an update onto their web site. They announced they are finally ending all support for Macintosh Internet Explorer as of 31st December 2005 and will not be providing any further security or perfomance updates. Furthermore, the browser will not be available for download from January 31st, 2006. They then go on to actively promote users adopt Apple Safari as a “more recent browsing technology”.

This isn’t really completely new – it has been in Microsoft’s Lifecycle Policy document since at least June 2003 (as seen in this CNet news article from June 2003).

When it was first released in March 2000, version 5.x of IE for the Mac was much more standards compliant than it’s Windows counterpart – and even though Microsoft ended development over 2 and a half years ago, the browser still performed better at rendering CSS in a consistent fashion than more modern Windows Internet Explorer builds. That’s not to say the Macintosh version wasn’t ready for retirement… and without anyone remaining to develop it… it’s loyal users have quietly migrated away.

We now have Apple’s flagship Safari as well as the latest Firefox, Opera and Netscape browsers available for MacOSX as well as a dedicated following of less well-known browsers (including iCab and Camino) that remain in development.

I don’t think the loss of IE is going to be a problem for Mac users and web developers going forward – it will be good to see it finally drop off the web logs, though.

Comments Off