PHP: Targeted Content Delivery

The basis of this method is to use a server-side browser detect method to determine whether the browser is IE5.5 or IE6.0, which support the Microsoft AlphaImageLoader style filter. The PHP function then returns HTML formatted accordingly.

The browser detector

The basis of this function is described elsewhere. Briefly, it takes the user agent string and parses it for information on the browser that is querying the server. Specifically, it tests for:

the presence of the ‘MSIE’ string (testing for Internet Explorer),
the absence of the ‘Opera’ string (testing for Opera),
the presence of ‘Windows NT 5.2’ and ‘.NET CLR’ strings together (testing for Windows Server 2003 and, by exclusion, Safari and iCab)
the version number in the ‘MSIE x.x’ string (testing for IE5.5 and IE6.)

<?php $ua = $_SERVER['HTTP_USER_AGENT']; $png = 'alpha'; if (strpos($ua,'MSIE') != false && strpos($ua,'Opera') === false) /* browser claims to be IE and is not Opera */ { if (strpos($ua,'Windows NT 5.2') != false) /* OS is Windows Server 2003 or Mac OS X and browser is Safari or iCab (or other unknown) */ { if (strpos($ua,'.NET CLR') === false) return; /* return $png = 'alpha' */ /* OS probably not Windows Server 2003 */ } $ver = substr($ua,strpos($ua,'MSIE')+5,3); if ($ver >= 5.5 && $ver < 7) { /* the browser is Microsoft IE5.5 or IE6 */ $png = 'msie'; } } ?>

Other PHP functions

After the browser has been determined, the correct HTML must be sent to it. For standards-compliant browsers, this must the standard HTML:

In the case of IE5.5 and IE6 it must be an HTML element with no (or transparent) content and the PNG applied as a background image style:

Realistically, the AlphaImageLoader filter can be applied to any element that has layout (i.e. dimensions), including DIV, H1, and IMG elements. For the purposes of this exercise I've used IMG elements for two reasons. Firstly, it is semantically correct in terms of how the page is intended to be viewed, and secondly the IMG element can have the usual ALT attribute applied to it for the benefit of visitors who have images turned off in their browser.

Therefore, the function must accept at least two parameters, the image source and alternative text, and format these accordingly into the correct HTML for the browser. The image dimensions will be read directly by PHP, assuming that it's compiled with the GD image library.

<?php function create_png_image($img,$alt) { $size = getimagesize($img); if ($GLOBALS['png'] == 'alpha') { $html = "<img src=\"$img\" $size[3] alt=\"$alt\">"; } else { $html = "<img src=\"blank.gif\" $size[3] alt=\"$alt\" style=\"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='$img')\">"; } return $html; } ?>

Putting it all together

All that's needed now is to call the function from the point in the HTML where the image is required:

<?php echo create_png_image('image.png','alternative text'); ?>

Pros and cons of this method

It relies on a browser detect. Normally this is a bad idea, but in this case, addressing browsers by inclusion rather than exclusion (i.e. this is a solution targeted at specific browsers), it's not inappropriate. The only problem comes in the fact that non-Microsoft browsers that haven't been covered by the browser detect might be served a style that they cannot support.
The technique uses an in-line style, which is contrary to the separation of presentation from structure. This may be addressed by using an external or embedded style sheet, and using an id attribute to target each element with the appropriate style filter.
This method will work even if JavaScript support is disabled in the browser.
The function only delivers a IMG element with a PNG as source to browsers other than IE5.5 and IE6. Browsers that don't support PNG image files or their alpha transparency (e.g. versions of Internet Explorer for Windows prior to 5.5) will still be served this image. The function could be refined to detect such browsers and serve them a GIF image file instead.