top navigation
design seminar: biography

03. the future of css and css-3

What’s missing from CSS?

Beyond a certain rudimentary threshold, ease of use is missing.

It’s easy to create certain kinds of simple layouts, and for some sites these simple layouts are appropriate and sufficient.

CSS also lets you create much more sophisticated designs, but doing so can be almost as complex as using JavaScript, and that’s frustrating and off-putting. Even a few things that you can easily do with tables are hard to do in CSS — for instance, creating a simple, liquid layout with three equally high and wide columns, where one or more columns are of fixed width and others reflow to fit the user’s viewport.

To be fair to the brilliant framers of CSS, they faced and largely met the nearly impossible task of providing a human-comprehensible language that can create effects as rich and as varied as those in print, and yet can also do what is needed on the web, where layouts often need to be flexible (user-adjustable, scalable, capable of reflowing to fit the browser window if needed, etc.) But the cost of meeting those needs was ever-more-complex syntax that is hard to understand and master. And to do certain things, you still have to think like an old-school web designer; for instance, you often have to create repeating background images that lie on top of other repeating background images, just like in the old days.

Part of the frustration also comes from the sometimes-maddening quirks and differences and bugs in this generation of browsers. To be fair to the browser makers, it is hard to build a cart when you’ve never seen a horse. When this generation of browsers was being rebuilt (often from the ground up) to support standards, there were few CSS layouts online, and those that were online were of the most basic variety — because no browser would support anything more complex. There were some test cases and test suites, but these had little to do with the real world (and that’s not the fault of the folks who made the test suites).

Once we had standards-compliant browsers and once web designers began creating more sophisticated CSS layouts, the flaws in individual browsers were revealed. This put browser makers in the awkward position of having to continually fix their existing releases. And not all browser makers have been willing to do so. Mozilla had a system for doing so (Bugzilla). Safari and Opera have a stake in doing so (growing market share). But Microsoft had little impetus to fix the bugs in IE6/Win: why remix a hit record, especially when you’re giving it away free?

So designers must not only learn complex syntax, they also have to discover workarounds. And even with all that, some things are still hard to do. It’s worth doing them, but it would be an easier time and an easier sell it if were easier to do them.

Then too there are still all kinds of visual effects that are missing. I’ve always wanted to rotate a layout by a few degrees.

There are lots of reasons you can’t do that in CSS (including, operating systems are not designed to run text on anything but a horizontal line). Wrapping text around images is another toughie. It can be done, but it requires so many nonsemantic divs, so many image slices and markup cheats, that it can hardly be said to be an improvement over oldschool slice and dice table layouts. For me, if I want the benefits of CSS and structural markup, it rules out even trying to do complex text wraps. And maybe such layouts don’t belong on the web: there are just too many ways a user could break them, and the required markup would not make sense outside the visual browser space.

Still, as with older web layout methods, there remains a frustrating gap between what you can visualize, what you can easily achieve, what you can achieve only with incredible difficulty, and what you still can’t do to save your life.


You've been quite the fighter for Web standards through Web Standards Project (WaSP) that you currently lead. Your recent victory is Netscape's 6 compliance. What do you think of W3C's draft of the CSS-3 specs?

I'm having them translated into English now, and will let you know when that's done. I think CSS-3 is about increased power and flexibility - for instance, making it trivial to do with Style Sheets what we now do easily with HTML table-based layouts, but have a tough time pulling off in CSS.

But I'm in the trenches with all Web designers; what I really need now is solid support for CSS-1. With a few exceptions, I have that in the latest versions of IE, Navigator, and Opera. But previous versions of some of these browsers are so badly broken that implementing even the most basic parts of CSS-1 can cause some of these browsers to crash.

This has lead many developers to shelve CSS and continue building broken sites with non-standard, non-validating HTML extensions and workarounds in the name of backward compatibility. The absurdity is that browser makers have finally given us what we asked for three years ago, and now many of us are afraid to use it. It's a cycle that can only be broken by taking bold steps.