Everything You Know About CSS Is Wrong (book review)

Over the last year or so there seems to be have been a shift in interest away from CSS in favour of scripting and other technical stuff, in usability and other web design sciences. But there are still areas of CSS left to talk and learn about. Only last month, two new books, both on related aspects of CSS landed on my desk: Everything You Know About CSS Is Wrong by Rachel Andrew and Kevin Yank and Flexible Web Design: Creating Liquid and Elastic Layouts With CSS by Zoe Gillenwater.

Do you need another book about CSS?

You might well be thinking Do I need another book about CSS? After-all, there is a crunch on credit. So is either worthy of your hard-earned cash?

Unlike so many books about CSS, neither of these are for beginners. Neither are CSS primers. (If you are looking for the best introduction to CSS, I still recommend Simon Collison's Beginning CSS Web Development above all other other beginner titles.) Rachel, Zoe and Kevin (somehow referring to them by their surnames seems too formal) have taken a different approach and they focus on narrower CSS topics; flexible layouts and the display:table; property. I like this approach. It's refreshing and I hope that other authors will follow suit as it encourages a deeper understanding of CSS as a mature technology.

I will write about both books over the next couple of days, starting with Everything You Know About CSS Is Wrong. After-all a title like that just begs me to prove it wrong.

Everything You Know About CSS Is Wrong

The kind folks at Sitepoint sent me a preview copy of Rachel Andrew and Kevin Yank's Everything You Know About CSS Is Wrong a few weeks before it appeared in print, as along with Cameron Adams, Jonathan Snook and Derek Featherstone I contributed a short panel piece on why I am pleased as punch that the makers of Internet Explorer 8 have implemented support for CSS tables.

Everything You Know About CSS Is Wrong is a slim book. So slim that you could easily read in just a few hours, or if you're a bloke, in a few trips to the loo. Although its title implies that it covers several aspects of CSS and that Rachel and Kevin will attempt to re-educate you on everything you know about CSS, instead they focus on CSS tables for 94 of the 111 pages. Deftly they take the reader through the reasons why layout with CSS has always been possible only with compromises and why, in their opinion, CSS tables are now ready as a prime time layout solution. Thanks largely to support for them in the up-and-coming release of Microsoft Internet Explorer 8.

Rachel and Kevin open by explaining what they see are the problems with the CSS layout techniques we use everyday. Now I couldn't agree more that floats and positioning lack the flexibility to create today's rich, intricate page layouts. After all these types of layouts were not envisioned at the time that CSS boffins at the W3C invented these properties. I was really looking forward to learning about CSS tables but most of all to being convinced that they were a way to move web page layout forward. I was a little bit disappointed.

The examples of where floating and positioning techniques fail if you are making standard column layouts are very clearly explained, but Rachel and Kevin could have done so much more to demonstrate precisely when and why these commonly used techniques fail. After-all, floats have become the de-facto standard for creating column layouts and they are used on possibly hundreds of thousands of sites.

Where I see floats fail is when designers and developers (over)use them to create grid-based interface elements. Designers so often pile float on top of float, until their layouts remind me of a game of Kerplunk. These over-floated constructs are fragile, often inflexible and tied too closely to a specific visual layout. In such a slim book, I wish that Rachel and Kevin had devoted several more pages to this key part of supporting their argument that CSS tables are the solution to these layout problems. I would have liked to have seen them make a stronger case for why we need a different solution, perhaps by highlighting examples from well-known sites and demonstrating where their using floats or positioning causes problems.

Asking that you largely take them at their word that using floats and positioning is wrong, Rachel and Kevin move quickly into explaining why CSS tables are a more robust and reliable solution for today's elaborate page layouts. Rachel and Kevin are fantastic technical writers and they do a great job of explaining CSS table properties that many designers, including me, might be less familiar with. I learned a lot about CSS tables, their syntax and their behavior in browsers that have implemented them. You will also discover how using CSS tables will help to solve common layout problems such as equal height columns. Of course there are downsides too, particularly in relation to absolutely positioned elements inside container elements that have both display:table; and position:relative; applied to them. And just when things seemed to be going so well.

Of course you'll probably know that versions of Internet Explorer prior to version 8 ignore CSS tables completely, so after explaining their benefits, Rachel and Kevin cover several approaches for how you can handle Internet Explorer < 8's lack of implementation. As they freely admit, their first option, to ignore older browsers, will not be feasible as particularly Internet Explorer 7 will laughing at us for some years to come. But their suggestion of providing simplified layouts to Internet Explorer < 8 might be an option you could consider. That is as long as you don't buy the outdated notion that all browsers must see the same visual design.

Rachel and Kevin's final suggestion, forking your CSS to supply CSS tables to browsers that understand them and reproducing your layouts using floats and positioning for Internet Explorer < 8 is logical, if probably impractical in most cases. It also begs the question, Why not stick to tried-and-tested floating and positioning techniques?

On first read, Rachel's and Kevin's answers were music to my ears as they echo many of the reasons why I advocate that designers and developers embrace the full range of CSS selectors, pseudo-elements and other currently implemented CSS3 properties.

If we don't start using these features now, then who's holding back the web? The users who haven't upgraded their browsers? Until we build sites that take advantage of the new features added to the latest browsers, how can we expect those users to upgrade?

But I still have nagging doubts. I'm a designer who loves to test what is and isn't acceptable in progressive enrichment but I'm not sure that I'm ready to take the step of promoting regressive page layouts. Browser differences for rounded corners, transparency and other small details? I can live with those. But wholesale differences in layout? I'm not ready to go that far. Of course I could do as Rachel and Kevin suggest and reproduce CSS table layouts using floats to help Internet Explorer along and in doing so take advantage of the new features added to the latest browsers.

But if I develop layouts using CSS tables, and then develop the same layouts using floats for people using Internet Explorer < 8, how will they see a difference? What reasons are there for them to upgrade? To me it seems that this approach makes the user upgrade argument self-defeating.

Leaving aside questions about whether its title is misleading, I really wanted to love Everything You Know About CSS. I'm a sucker for books with a strong message, particularly ones that challenge conventional wisdoms. Rachel and Kevin are great technical writers and they do a wonderful job of explaining how CSS tables work and how they will help you to solve common layout problems. But in their mission to convince me that CSS tables are ready for prime time I felt that Everything You Know About CSS Is Wrong falls short of being the inspirational manifesto that it tries so hard to be.