DEBRIS.COMgood for a laugh, or possibly an aneurysm

I spent the weekend (2 weeks ago) designing a new website — something I have not done since this journal went online in late 2000.

Here’s the site: stlouiscelticcross.com

It uses CSS heavily, but not exclusively. I would have expected CSS support in modern browsers to be a lot further along than it is, given that CSS was introduced in 1996. But the process of making a CSS-based site look right in even the recent browsers makes for a frustrating, teeth-gnashing, no-fun weekend.

The art of CSS is the art of piling hacks upon hacks, without having the whole mess come crumbling down. (Tip: just load up your CSS-based site in IE5/Win to see Eiffel-tower-as-pick-up-sticks.) CSS authors, perhaps due to their backgrounds as designers (by which I mean: non-programmers), seem to seek out cross-platform compatibility within the stylesheet itself, rather than doing what I would consider more natural, because I’ve had to do it for most web projects for the past seven years: detecting on the server side what browser is being used, and serving up customized content to fit.

I see the appeal of the client-side solution. I recently discovered that an old site of mine, which used browser detection on the server to tweak the javascript-based navigation, was failing in Mozilla 0.9.X because I hadn’t had the foresight, in 1998, to predict that ‘Mozilla/5' would eventually be widely used. (And in my defense, it still isn’t!) The client-side solutions advocated by designers appear to be less likely to suffer from this sort of version-specific breakage, in that the hacks they employ tend to be based on capabilities rather than version numbers. In other words, any browser with the specific capability will work, regardless of its version number — so, in theory, 5 years from now the page will work for everyone, even though its CSS has not been tweaked to accomodate the pecularities of newer browsers. Of course, this very much remains to be seen.

Hacks upon hacks… here is a crash-course:

• the @import hack: Hide the stylesheet from old browsers, which would mangle their output anyway, by referencing the CSS in a way that only more-modern browsers understand.
• Tantek Çelik’s box model hack, which “takes advantage of a CSS parsing bug in IE5/Windows and IE5.5/Windows” to serve CSS rules specific to those browsers, without breaking browsers that actually do a competent job of rendering CSS.
• the DOCTYPE hack, which requires CSS authors to sift through dozens of contradictory choices just to pick an appropriate first line for an HTML file. Fortunately, Pete Zeldman has done the heavy lifting on this one, reducing the universe of choices down to a manageable 7.
• the CSS2 selector hack, which hides CSS rules from IE5/Win, which does not understand CSS2 selectors.

Sharp-eyed readers may recognize the core design of the stlouiscelticcross.com site. See the site’s colophon for the credits.

If there’s a final lesson in all this, it is, as it has been for years, test your site. I spent 4 hours implementing the original site, which looked great in Mozilla/MacOS… and then another day trying to make the site work in IE/Win. Perhaps my mistake was in not designing for IE/Win originally — although my experience indicates that the various versions of that browser are so broken in so many different ways, it probably would not have helped.