Alpha Beta Png Support

From CSS Discuss

Jump to: navigation, search

I have reproduced the original page here from the Wayback Machine since the original site at http://leon.vicnet.net.au/alfabeta/ seems to be down.


Contents

Cross Browser PNG Support, At Last!

Yes that's right. This page was created using PNG files with an alpha channel, without the use of Java Script to switch style sheets. And it works on IE5.5, IE6, Gecko, Opera and KDE (all PC, MAC, Linux) (see "the catch" for browsers it won't work in). The advantages are mind-bending. Try changing the style sheets with the links at the top of the page. Only the background and the top left image change. Everything else is the same. Cool huh?

After reading the article in A List Apart on the Alpha Image Loader, I thought I could go one better, by eliminating the Java Script and combining it into one CSS file.

What? How?

By using The Owen Hack, thanks Owen, combined with the Alpha Image Loader filter describe in A List Apart.

The Alpha Image Loader is use to load the PNG file for IE, forcing it to support the alpha channel in the PNG.

The Owen Hack is used to hide the background PNG from IE.

I do this for two reasons:

  1. Gecko browsers will not recognize the Alpha Image Loader as it's not valid CSS, so it's necessary to provide a background PNG for it to display.
  2. IE will display the background images with no alpha so it's necessary to hide the background image from IE.

This is what the CSS looks like:

h1 {
  height: 100%;
  width: 600px;
  margin: 0;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
  (src='your.png',sizingMethod='scale');
} 
head:first-child+body h1{ /*The Owen Hack, hides this from ie*/
  background: url(your.png);
}

and it's as simple as that, another advantage is that you can use The Owen Hack as a box model hack at the same time.

The Drawbacks

  1. The 'filter' property is not valid CSS. See alternative below for conditional comment method.
  2. Alpha Image Loader sometimes causes links (and other content) inside the element with the filter to be unclickable. See IE Alpha Image Loader, Transparent PNGs and Links for an explanation of how to circumvent this problem.


Image Paths

Note: Alpha Image Loader expects image paths to be relative to the HTML document, and CSS expects image paths to be relative to the style sheet that is assigning the image, so be careful when using Alpha Image Loader in an external style sheet. It's probably best practice to only use root-relative paths (i.e. '/css/img/myImage.png' not './img/myImage.png') with Alpha Image Loader.


Alternative Method

I always use a slightly different method that uses no CSS hacks like The Owen Hack at all (especially since they've been openly discouraged by the IE team) and also accounts for non-visual browsers like screenreaders.

This is the html:

  <div id="container">
    <a id="fooref" href="#foo">Foo</a>
  </div>

This is the normal style sheet (screen.advanced.css) which is @imported :

#container a {
  display: block;
  text-indent: -1000em; /*offset the text to the left (invisible but hearable for screenreaders or lesser browsers */
}
#fooref {
  width: 145px; /*exact width and height of the image*/
  height: 50px;
  background: url(/img/foo.png) no-repeat;
} 

This is in screen.iefixes.css that is imported via Conditional Comments only for IE<7:

body #container a { /* higher specificity than selectors in screen.advanced.css, so it overrides them */
  background: none;
}
#fooref {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/foo.png',sizingMethod='scale')
} 

That's it. It has cleaner CSS, is more accessible, future-proof and as a bonus passes CSS validation.

PNG Tips & Tricks

Stick with JPG format for "photograph" type images. For all other cases use PNG; irrespective of the number of colors in your image. If the number of colors in the image is 256 or less you can use the PNG-8 variant. In other cases, use PNG-24 (with or without transparency). When in doubt, save your images in PNG-24 format; then use an open-source/commercial PNG optimizer to batch optimize your images. Most optimizers will detect the best variant of PNG for a given image that produces smallest file size while retaining all image information.

Here is a PNG-24 compressor I've used. It's quite good. It reduces the files by a further 30% or so.

PNG Color Problem in IE

Just because Internet Explorer shows PNGs in wrong (darker) color does not mean you should fall back to GIFs. PNG is smaller in file size when compared to GIFs provided that you use the right tools to tweak and compress a PNG. PNG Color Problem in Internet Explorer discusses the color problem in IE and its workaround, and mentions open-source tools that compress PNG images for smallest possible file size and consistent display across almost all browsers, including IE.

Personal tools