Review of Everything You Know About CSS is Wrong

Everything You Know About CSS is Wrong! is a new book by Rachel Andrew and Kevin Yank and published by Sitepoint. The book’s title is a bit of a marketing ploy and it’s not entirely accurate in my opinion. That aside, the book describes some new CSS layout methods, in particular the use of display:table and associated properties like display:table-cell, that will be supported by all major browsers when Internet Explorer 8 is released. The book argues that the release of IE8 means that we should be using these methods now [‘our part of the bargain’] in order to push the envelope for CSS layout and stop ‘holding back the Web’.

Firstly, this is quite a slim book and you might argue that 115 pages or so is not the best value for money compared to some of the other Sitepoint books. It’s clearly written and easy to read. Just don’t expect to take more than a couple of hours to read it.

The evolution of browsers and webpage layout methods

These methods were not actually designed for the job

The book starts off with a short background about the browser wars and the development of CSS and moves on to describe two CSS layout methods [1] that are commonly used to create simple three-column layouts. In general, this involves using floating or absolute positioning of elements to achieve the desired three column side-by-side look. The book explains that these methods have been used creatively but they were not actually designed for the job.

Subsequently, the book describe the use of the the display property and its range of table-related values, for example display:table-cell, that enable CSS to control how elements behave in a table-like manner [without the use of <table> and <td> tags and the like]. These properties and values have been around for a while but have not achieved widespread use because of lack of browser support [specifically, no support from IE6 and IE7]. The use of these new display values is called CSS tables and this technique allows a few simple style rule declarations to be used to create column-like website layouts or to arrange other webpage elements [normally, boxes/text blocks of some sort] in a side-by-side fashion.

Floats or clearing of floats are not needed

For example, a simple three column layout can be achieved by assigning display:table to a containing <div> element, and then assigning display:table-cell to its child <div> elements. This causes the <div> elements to behave as if they were part of a HTML table. As an example, the height of the table-cell <div> elements is controlled by the element with the most content. Column layouts are easy. Floats or clearing of floats are not needed. The elements can have borders and background colors applied in the normal way. No faux column background images are required to simulate a column. It’s great!

This is a powerful method that makes a column layout and side-by-side boxes simple to implement. Well, there’s a bit more to it than that but you get the general idea.

Supporting older browsers

Now, here’s the rub, IE6 and IE7 do not support display:table and the book gives three workarounds, or options, for this problem if you decide to start using CSS tables for layout. Actually, in my opinion, only one of the three options is likely to be acceptable if you are designing websites for clients. The first option is ‘Ignore Older Browsers’ but this is not really an option in my view [unless you want to be experimental in your website layout approach]. The other two suggestions involve the use of conditional comments to deliver targeted style sheets to IE7 or less browsers. This is a good approach but the second workaround uses this method to deliver a simplified layout. Most clients I know would not accept this.

This leaves the third option which is to put your ‘old school’ floated layout CSS declarations/rules into a separate style sheet that is targeted to IE7 or less. Inevitably, this involves a degree of extra work and it rather negates the simplicity of CSS tables if you need a second style sheet with additional rules. I am a bit sceptical about this and the book also recognises this. However, it argues that unless we move forward with new methods now, we will be holding things back.

Even newer layout methods

The final chapter of the book describes more advanced methods like the Multi-Column Layout Module and Grid Positioning. These methods are a bit further away from common usage because they are part of the CSS3 specification.

In summary

I agree with the book that CSS tables are a great method. Display:table and associated values are fantastic and easy to use for generating multi-column layouts and side by-side boxes. If you want to learn about newer CSS layout methods that are due for the big time, this could be the book for you.

Where I think I disagree is when to implement these methods. The book says now but I am not totally convinced by this argument if it results in an increase in the complexity of my conditionally commented style sheet to accommodate a workaround solution that is acceptable to clients. To be honest, with the release of IE8, I was looking to decrease my use of conditional style sheets, not increase their usage. I can see both sides of the argument but I just need a bit more convincing!

Nevertheless, Everything You Know about CSS is Wrong! is worth buying if you use CSS for website layout. It describes several new CSS layout methods. It has made me think about these methods [2] and when I might use them and that’s a good thing.

¹ Note: Websites are generally based on a 2D grid and aligning ‘boxes’ of content in a side-by-side fashion is a big part of this. In the old days, we used HTML tables for layout but the advent of CSS meant that these were replaced in many cases by CSS layouts. If you have been working with CSS layouts for some time, you’ll know that this means jumping through a few hoops to get some supposedly simple things to work. A simple three column layout usually means creative use of floats and/or absolute positioning to get elements to behave like three columns should. The use of newer CSS properties like display:table looks set to change all that.

² Note: After reading this book, I took one of my ‘CSS library’ layouts and converted it to use CSS tables. Yay!

Technorati : css