complexspiral devolved

The page you are viewing right now exists to show off what can be accomplished with pure CSS1 and a little teeny piece of CSS2 (specifically, the hover effects on hyperlinks). This time, however, we've gone a step further and used some browser flaws to help out browsers that can't properly display the original complexspiral demo. If you're viewing this page with Internet Explorer 5.x for Windows, then you'll see this page rendered using "halfscreen" images instead. The effect isn't as subtle or as appealing, but it's a relatively close approximation.

In other words, this demonstration has been extended to make it a touch more practical than its cutting-edge ancestor. Will wonders never cease?

How does this one work?

I decided to use the "Box Model Hack" to offer IE5.x/Win background images it can't screw up. If you're using a more advanced browser, then you'll get the same effect as in the original complexspiral. (Unless you're using Opera, in which case you'll get the same broken layout as usual.)

Here are the styles for the content area, for example: 

div#content {background: transparent url(halfscr-blue.gif) 0 0 repeat scroll;
   voice-family: "\"}\"";  voice-family:inherit;
   background: #468 url(shell-blue.jpg) 0 0 no-repeat fixed;}

So IE5.x will see the first line, then hit the second line and stop (see the box model hack page for an explanation). More correct browsers, like Mozilla (and derivatives) and IE5.x/Mac, will keep going and see the third line, which loads up the same files used in the original complexspiral demo.

I'm not seeing seamless compositing or a halfscreen image!

Then I'd be willing to bet that you're using Internet Explorer for Windows version 6.0, which saw fit to fix its legacy parsing bugs but not properly support CSS1, so the page will probably still fall apart there. And yes, this page uses a strict DOCTYPE, so IE6 is in "strict mode." I could put it into "quirks" mode by changing the DOCTYPE, but the parsing bugs were fixed there as well, so at this point I don't think there's a way for IE6 to get this one right. You can't imagine how frustrating that was to discover. (Although if I find another parse-bug hack works against IE6, I'll revise this page to use it.)

Pros and Cons

The obvious advantage here is that you get closer to having the design presented in the IE5.x line, which would otherwise serve as a blocker to the adoption of a layout effect like this one. This makes it easier to play with interesting layouts without worrying that your page will look horrible in older browsers.

The drawbacks are threefold. One is IE6/Win, which still won't do this one correctly. (One step forward, two steps back...) Another drawback is that to use this approach, you have to make the CSS more complex for the sole purpose of catering to browser bugs. Whether you're willing to do that is up to you. I'm personally on the fence about it.

The final drawback is that the technique here relies on using browser's parsing bugs against them. As IE6 has demonstrated, it's always possible for a future version of a browser to fix parsing bugs without fixing other bugs. A future version of Opera, for example, might fix its parse bugs without correcting its limited support for fixed-attachment backgrounds, thus landing it in the same mess IE6/Win has found. It's up to authors to decide how much of a drawback that represents for their individual situations.

Image credits

Jump to