On 25 May 2011 16:14, Michael Stevens <bigm...@bigmikes.org> wrote:
> I'm reworking a site and changing some colors around and I've decided to
> remove some backgrounds from images and resave everything as transparent
> PNGs. In my stylesheet I've got the following to allow older versions of IE
> to properly display PNGs:
>
> …
>
> What's the easy and/or best way (hopefully the same answer for both easy &
> best) of handling this?
>
Hiya Mike,
Disclaimer: since we're relying on behaviour to establish the desired
effect, a comprehensive solution cannot rely entirely on CSS alone.
I personally don't recommend the following option, although it has been
widely hailed as the "don't make me think" solution. The quick and dirty,
blanket application technique, as popularised by HTML5 boilerplate [1], is
to download the DD_belatedPNG JavaScript library [2] and insert the
following code into the head of your html documents:
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix('img, .png_bg'); // Fix any <img> or .png_bg
bg-images. Also, please read goo.gl/mZiyb </script>
<![endif]-->
You would then have to add the class 'png_bg' to any elements with
background-images requiring the modification.
The advantages to this solution are that it is far less performance
intensive than methods requiring faux-CSS expressions and filters (as yours
does) — which are effectively dependent upon JavaScript anyway; and also
that this solution (using Microsoft's proprietary VML markup) can preserve
effects such as positioned & repeated backgrounds, which the
alphaImageLoader filter cannot.
The heavy disadvantages include a need to re-apply this fix to any
dynamically introduced or significantly elements, the fact that it relies
upon tampering with your markup, and that it has its own performance issues,
heavy resource dependencies, reliance on JS and can screw up your
positioning in new and interesting ways for elaborate layouts…
A cleaner, non-JS solution relies on the little-know 8-bit alpha PNG format.
A very recent service [2] allows you to upload full transparency 24-bit or
16-bit PNGs, and have them compressed to 8-bit alpha PNG — such that modern
browsers will reveal variable transparency but IE<7 will treat any level of
transparency as total (like transparent GIFs). The caveats to this solution
are that 8-bit PNGs support a maximum of 256 colours (including transparency
variations — which may not be enough for complex images), and some of your
PNGs may rely on very slight transparency for some of their details, which
IE6 will reveal as pure transparency — thereby ruining the effect of more
subtle images.
Personally speaking, I would go over your site and treat each case as it
needs — alphaImageLoader if absolutely necessary, separate 8-bit PNG if
possible — but be warned that both of these blanket solutions are incomplete
and have own highly specific drawbacks.
[1] http://html5boilerplate.com/
[2] http://www.dillerdesign.com/experiment/DD_belatedPNG/
[3] http://www.8bitalpha.com/
Regards,
Barney Carroll
barney.carr...@gmail.com
07594 506 381
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
