ComplexSpiral Redux

Hi. Stephen Rider here. Before anything else, I would like to thank Eric Meyer for pioneering this excellent technique. This is his baby; I've just helped it find its legs.

To quote Eric: "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)." Couldn't have said it better myself. Hopefully this demonstration will put the last piece of the puzzle in place to allow web designers to use the technique on actual websites aimed at "Joe User" using "Joe Browser".

What, again?

Eric's technique, dubbed "ComplexSpiral" has been demonstrated multiple times -- thrice, in fact -- on his own website. The original version was a proof-of-concept that only worked in browsers that fully understand the CSS instruction "background-attach: fixed". Unfortunately, this group does not include Microsoft Internet Explorer for Windows (you might have heard of it). Well, heck. That's neat and all, but not very useable. What to do... what to do.... Back to the drawing board!

His next step was to use a variation of the Box Model hack to pass an alternate style to IE 5. The alternate style uses a "halfscreen" image (e.g. alternating pixels are either solid color or totally transparent) as the background for the content area and links. It doesn't look as nice, but it's a reasonable approximation of the effect and a useable degradation of the full effect. It's also in keeping with the spirit of graceful degradation. Unfortunately, the Box Model hack is not triggered in IE 6, which means we're back at square one.

Important Note: Internet Explorer 7 is going to be released soon. Although this page describes the effect as not being compatible with IE, it is my understanding that IE 7 will be quite capable of showing the full effect. I will rewrite the page accordingly after I've seen it with my own eyes, but for now, I'll simply point out the "Future Proof" section below.

Conditional Comments to the Rescue!

That's where I came in. In a nutshell, we need to feed a few lines of CSS to every browser, and then send an alternate couple of lines to Internet Explorer, and only Internet Explorer.

Luckily for us, Microsoft saw fit to write into Internet Explorer the ability to recognize "conditional" HTML comments, which allows a developer to write lines that either: a) only IE can see, or b) IE alone can not see. Thus, at the top of this page, I have a normal everyday link to an external stylesheet that contains the following CSS (note-- all file references in the code are direct links so you can easily look at the files I'm using):

Then, I use a conditional comment to link a second stylesheet that only IE can see. The stylesheet for IE contains this:

...and the conditional comment containing the link to that stylesheet looks like this:

All browsers will see the first stylesheet. The link to the second stylesheet is inside what is technically an HTML comment, and by definition should be ignored by any browser. Internet Explorer sees it, because it's a specially designed comment cooked up by Microsoft.

Future Proof

Part of what is really nice about this solution is that it's not actually a "hack". Every browser is interpreting the code exactly as it was intended to. We're not taking advantage of a single bug here, which makes it extremely future proof.

Today we have no way of knowing if IE 7 (or 8... or 9...) will fix the "background-attach: fixed" bug or not. Either way, unless MS removes the conditional comment feature, future versions will continue to use the alternate stylesheet and show the diminished effect -- until we make one minor adjustment. Microsoft actually made the conditional comments pretty flexible, which means that instead of saying "if IE", we can say, for example, "if higher than IE 6". So if IE 7 does recognize the pertinent CSS, we can easily go back and change "<!--[if IE]>" (e.g. "if Internet Explorer") to "<!--[if gt IE 6]>" (e.g. "if greater than Internet Explorer version 6"). Voila! IE 7 will use the complete effect, and 5 and 6 will continue to use the diminished.

Pros and Cons

Web designers can finally use this flexible and visually appealing effect. It uses no hacks, and is pretty simple to implement. It does not require you to alter your primary style sheet. One of the things I have always liked about this effect is that it's the kind of thing that might help to break more designers out of the mindset that a web page is a "print medium" that just happens to be on a computer.

The biggest disadvantage I see is that it still doesn't look... great in Internet Explorer. The "diminished" effect is just that... less than it should be. On some machines IE will look "jittery" when you scroll. Personally I think it's a decent compromise when you consider the interesting effects you can create with it. If you want to avoid the jittery effect, your design may allow you to substitute in a solid color or a patterned background instead of the "halfscreen" GIFs -- remember, you can feed any different background info you like to IE.

Image credits

• The photo of the planet Jupiter was borrowed from the Mac OS X "Cosmos" screen saver.

Jump to

• Home Page
• ComplexSpiral (original) on Eric Meyer's site