Cross-browser complexspiral?

Important

Note: This document should be considered superseded by Virtuelvis: Gallery: Real Opacity. It remains archived for informational purposes only.

The reason? Well, this example was created only as a showoff in a newsgroup, and to highlight bad performance with alpha blending in browsers. It was never intended to work as a tutorial for people, as it didn't cover compatibility and accessibility issues. For instance, if you turn off images, this page breaks in an extremely nasty fashion. Unfortunately, search engines picked up this document, and it became quite popular.

The real tutorial covers browser compatibility more in-depth, and is an example that degrades much more gracefully. I strongly recommend you read that instead. Also, from time to time, I will write other articles on CSS and XHTML at Virtuelvis. I hope you will find some of it useful.

Introduction

Simple CSS techniques can transform a fairly dull design into something a bit out of the ordinary. The techniques outlined here are, in all but one small case, fully standards-based

Transparency

After having visited Eric Meyer's website, and become fairly impressed by his knowledge of CSS, and achievements in the css/edge gallery,

What impressed me most at the time, was the complexspiral demo, where a background image was fixed on-screen, and visible through several layers.

The problem was, however, that the technique, while fully standards-based, didn't work well in other browsers than Mozilla. It simply had to be possible to create this effect, and make it work properly in both Opera and Internet Explorer

I also felt that, for the newer browsers, while the degradation was functionally graceful, eastethically, it's degradation was all but graceful.

While Eric had only used standard images, and standard CSS1, plus a little bit of CSS2, I knew that in order to make this truly cross-browser, I had to both use png image files with alpha-channels.

Browser differences

The effect you are seeing, should work in a fairly similar manner in Opera, IE6 (5.5?) and Mozilla.

The technique used relies on the standards-compliance of two of the browsers, and the failure to do so for the third.

Internet Explorer

IE has trouble handling alpha-blended png's correctly. Namely, ignores the "blend" in alpha-blending, and renders the color as a non-transparent solid color. This means we have to cheat, and use the filter-property in Microsofts extensions to CSS to add opacity

Opera & Mozilla

For Opera & Mozilla, this is pretty straightforward, as we just add the background to the page as normal.

The box you are reading right now, has the following (relevant) properties set:

      div.contentArea{  
        background: transparent url('t60w.png') repeat;
      }
      

Where 't60w.png' is a png with an opacity value of 60%.

Back to IE

As I said, for IE we have to rely on cheating to make this work:

        filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 60);
     

Compatibility

It should work in recent browsers, with decent support for alpha-channel png's. It should also work fairly well in browsers without this support, as older UA's act the same as IE, and should see a solid background color.

The only browser which might break a bit, is IE5/Mac, if it has an up-to-date png support. I haven't been able to test this though.

What about the non-standard CSS-property used? you might ask. Well: as long as browsers are instructed to ignore unknown properties by the CSS2-specification, there should be no real danger, as the overall usability of the page does not rely on this property.

Drawbacks?

I can only think of one: Alpha-blending requires quite a lot of system resources, and a page employing this technique might appear sluggish on old systems. It was however, tested on an ancient P200MMX with three servers running on it. Still usable..

Acknowledgements

The picture of the Moon was done by Carsten A. Arnholm, using a cheap web camera, loads of patience and other accessories. Great work, which deserves credit. Read his original announcement on the image on Usenet. (in Norwegian)

The idea? I already mentioned Eric A. Meyer somewhere near the first paragraph, but the idea of doing this cross-browser came into mind after discussing cutting-edge CSS usage in the norwegian newsgroup no.it.tjenester.www.html, after trying to convince thos users who prefer doing layout with tables.

Regards - Arve Bersvendsen