The CSS2 Wars: I think we lost

Like any holy war, it’s hard to say for sure who might have won what, and there will be plenty of people who will never admit that the war is over, but my feeling is that, for now, my guys—the CSS2 zealots—have lost.

I don’t think there’s any question but what we won the first battle, over whether toolmakers should make it possible to use CSS2/XHTML (though there is still plenty of mop-up work to be done, convincing Ev. to do real paragraphs and <br /> among other things).

Once the war turned from may we to should you—should everyone be doing tableless layouts, should every weblog, should Scripting News—well, I think we’ve lost. We’ve demonstrated that you can do a weblog with CSS2 layout that looks fairly similar in all the latest browsers, and isn’t completely unreadable in older browsers, if you choose to use a layout that doesn’t require precise placement, or if you are willing to use hacks and hide your CSS from browsers that you know will mess it up. That’s nice, for fulltime working professional web designers, and even for some interested amateurs. For Jane Q. Blogger, working two jobs and only blogging after the kids are finally asleep, it seems a bit much. If we have to convince people that it’s a good thing to not do layouts that look the way they want them to, because to look that way they’ll need two stylesheets and four rules for every width they specify, we’ve lost.

Jane should be using a pure CSS2 template, the only sort provided by her blogging tool, you say? Well, take a look at our best cross-browser effort, the much linked to NN4+ template from In my limited test suite (all Windows), in Netscape 4.79 the columns all start at different heights on the screen, and the right column isn’t actually resizing, it’s just sitting too far out to the right, being too narrow. When you shrink the window down enough, rather than horizontally scrolling, the columns overlap. To get any liquidity at all requires Javascript, since the page has to be redrawn after each resize. In Opera 6.0, everything behaves reasonably well, except for a gap at the right edge whenever the window is large enough. Internet Explorer 6 is quite well behaved until the window becomes small enough that the left and center columns collide. In Netscape 6.1, we see how the template is supposed to work, with the header filling the entire screen, and the columns never merging or overlapping. For a weblog aimed at Mozilla developers, that might be just fine, but I get more hits from Googlebot than I do from Netscape 6 and Mozilla combined. Although for my purposes it’s a step in the right direction (I’m looking for a NN4.x-safe template that will work with Blogger, where the lack of support for external stylesheets in the template switcher and on Blog*Spot means that @import is not an option), the need for incomprehensible IE5-specific conditional comments, the reliance on Javascript, and the general complexity make it an interesting demonstration, but not a workable solution.

We’re right: layout with stylesheets is cleaner, quicker, easier to maintain, you name it. It just isn’t practical in the real world of old browsers and people who want the layouts they want, not the layouts that CSS and its broken implementations are willing to allow. Sadly, even the vaunted NYPL Style Guide agrees:

Alas, for the foreseeable future, most Library projects will employ a combination of CSS and XHTML tables, in order to accommodate non-CSS-compliant browsers such as Netscape Navigator 4 and Microsoft Internet Explorer 4.

Ah, well. Maybe we’ll get them next time, when everyone has upgraded to the version 7 browsers.


No comments yet.

Name (required)
E-mail (required - never shown publicly)
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <del datetime="" cite=""> <dd> <dl> <dt> <em> <i> <ins datetime="" cite=""> <kbd> <li> <ol> <p> <pre> <q cite=""> <samp> <strong> <sub> <sup> <ul> in your comment.