New Book - "Everything You Know About CSS Is Wrong"

I got back from our two day honeymoon on the Isle of Wight to find that my latest book – co-authored with Kevin Yank – is out. It is currently available from Sitepoint and should be on Amazon before too long as well as in local bookshops.

One of the things that always amazes students on our CSS courses is the fact that there is no simple way in CSS with current browsers to create full height columns. One of our examples demonstrates the faux columns technique and you can see everyone in the room wondering why there isn’t a sensible method of doing that. For those of us who have been building CSS layouts for years, we are used to the hacks and workarounds and perhaps don’t even notice how odd some of the hoops we jump through are! For newcomers it can seem impenetrable, and a lot of it doesn’t really make sense, it’s just “how it is”.

This book is mostly about a simple method that will enable full height columns within CSS. The reason we haven’t been able to use it until now is lack of support in Internet Explorer, however IE8 – when it is released – will have support for display: table making simple grid-based layouts far easier to create. Of course, the world isn’t immediately going to install IE8, however this book is a look forward to something that we hopefully will be able to use in the not too distant future.

Some commentators have suggested that we shouldn’t have put a book out about a technique that can’t be used immediately, that will require workarounds to still provide support for older versions of Internet Explorer. I disagree. Something I point back to in the book is how the web community began to use CSS for layout even though support in Netscape 4 was limited and buggy. If those of us who were building CSS layouts right in those early days had said, “nah, it doesn’t work in Netscape, can’t do it”, then our recent history would look very different. It was only because the community were using CSS, finding problems in the browser implementations and shouting about it that things have changed. Our browsers are not perfect but the bugs we see, and the inconsistencies are nothing compared to what we were dealing with in 1999 – and the stuff we were doing then was nowhere near as complex as what we do today.

The book details ways in which you can use these techniques and still remain backwards compatible for older browsers. As someone who builds a lot of CSS, I can see ways in which I can immediately use these techniques, not for entire layouts but for elements within layouts, and as time goes on we should be able to use display: table more confidently. I hope that people will try it out and see what can be done – find the problems and come up with new solutions, just as we have been doing throughout the web’s history. There is very little currently written on this topic, and I think that when the truly great minds of CSS get onto it, we’ll see some new ideas come forward, and that’s a big drive behind writing a book like this – to start the discussion.

Jeremy Cavner on the 23 Oct 2008:

I totally agree with your reasoning to publish material on such new properties as the display: table. The discussion must go on, to push progress. Otherwise, [start Prince music] we’d all be writing HTML “…like it is 1999.”

Ca-Phun Ung on the 01 Nov 2008:

I admire your courage! I’ve been using the display:table technic for just over a year now with very surprising good results.

display:table comes with its own issues such as the inability to position anything relative or absolute inside a table-cell. However there are easy workarounds for this issue.

Once the Web community realise how simple it is to implement equal height columns with this technic I’m sure many will jump on the bandwagon.

Posted a response? Enter the URL

This site uses Webmention. If you post a response to this post on your own site, and you also support Webmention I'll be notified automatically. If not you can add a link here.