Everything I know about CSS is right!

Well at least for the next two years

aka a review of Everything you know about CSS is wrong! by Rachel Andrew and Kevin Yank

I just finished reading Everything you know about CSS is wrong! by Rachel Andrew and Kevin Yank. The title was choosen to be controversial, the book is about using CSS tables for layout.

Like most people I have avoided using or even learning about CSS tables for layout, because CSS tables are not supported by IE6 or IE7. Rachel and Kevin argue that because IE8 will support CSS tables you should start using CSS tables now, I disagree.

Are CSS tables ready for prime time?

In my opinion not now and not for at least 2 years.

The first issue I have is that even after IE7 has been out for over two years, IE6 is still a popular browser. IE6 still accounts for 25% to 33% of all Internet Explorer traffic to sites I have statistics for. Which means 10% of all visits to this blog and nearly 25% of all visits to work are done using IE6. So I expect that two years after IE8 is released a similar proportion of 10 to 25% all traffic to a website will be with IE6 or IE7.

Rachel and Kevin recommend that you use build sites using CSS tables and then use conditional comments to provide IE6 & IE7 with a stylesheet that either provides a simplified layout for IE6 & IE7 or uses todays current techniques like floated layouts to provide an equivalent layout. I can not see myself providing a simplified layout for IE6 & IE7 in the next 2 years, while those browser maintain a significant market share, particularly as my bosses all currently use IE6.

I strongly disagree with Rachel and Kevin in providing an equivalent layout using tricks, hacks and floats for IE6 & IE7, while using CSS tables for other browsers. Rachel and Kevin say this will save time, battling browser incosistencies. First you will have to build a site in CSS tables, then build it again for IE6 & IE7 in a totally different way. I believe that would be a waste of time, because the browser inconsistencies usually occur with IE6 & IE7, so if you build it right the first time using floated layouts, you only need to make minor adjustments for IE6 & IE7. Instead of building it once using CSS tables, then build it a second time using float layouts and adjusting for IE6 & IE7 inconsistencies. Build it once, build it well and it will be quicker and more reliable than build it twice.

CSS tables are not a panacea for all layout woes, Everything you know about CSS is wrong! does explain the limitations of CSS tables. If you are an old school hack like me who built sites with HTML tables last century. You will see that while CSS tables have some advantages, they also have disadvantages over HTML tables. There is no colspan or rowspan, so you end up with endless nested CSS tables, when you could the same job with a single HTML table.

Add this to the different browser interpretations of anonymous tables elements and the inability to absolutely position elements within CSS table elements. And you will find CSS table layouts even more bloated than a float layout with extra divs for hooks and as difficult to code or maintain.

Another issue I have with this book is the assumption that the only browsers that can not deal with CSS tables are IE6 & IE7 and everything will be all right once IE8 achieve dominance. What about mobile browsers. While the latest versions of Mobile Safari and Opera Mobile might support CSS tables, how many of the other numerous popular mobile browsers support CSS tables, not IE for Windows Mobile 6.

So is Everything you know about CSS is wrong! worth reading?

Well it is a good introduction to CSS tables, detailing the advantages and disadvantages. I might disagree with the underlying assumptions and Rachel and Kevin conclusions. However, it has got me thinking about using CSS tables to get certain outcomes in designs and then replicating the results in IE6 & IE7 using a conditional comment, a little CSS and JavaScript.

If you are a dinosaur still building websites with HTML tables, this book will not make you take the jump to CSS layouts, because CSS table layout are not that simple and you still need to learn about floats, absolute and relative positioning and other fun CSS things. Plus do you really want to build sites that will not look right in a large number of visitors browsers for the next couple of years.

The section of the book that got me excited was CSS3 Grid Positioning Module it is only working draft and no browser has implemented it, but it is the game changer as far as I am concerned for building web pages and if IE8 supported Grid Positioning, I know I would be using it on a regular basis within 18 months of IE8 release, if not sooner. What is offered by CSS tables is minor by comparison.

That is what disappointed me about the book, there is nothing in it that will change how I use HTML & CSS. It got me to think about how I use HTML & CSS, and did add a tool to my armoury, but that is it.

Technical books I own get split into two groups, good reference books like Eric Meyer’s CSS: The Definitive Guide, Jeremy Keith’s DOM scripting and James Edwards & Cameron Adams’ The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks which are battered and worn editions that get regularly pulled out to help with projects. And those that get read once and filed away. While an interesting read, Everything you know about CSS is wrong! is definitely in the second group.

3 Responses to “Everything I know about CSS is right!”

  1. web-not-so-very-master Says:

    This is madness!
    I think HTML tables aren’t that bad… If there would be a way to mark table as a part of presentational markup and specify cell order so text/ audio browsers that doesn’t display them could get the right order and meaning….

  2. Hmmm Says:

    Instead of designers sitting around waiting for everyone to upgrade to IE 7 or 8 and lamenting the time it will take…Just start developing sites that only work in the newer browsers. People will upgrade then…if you wait for them it will takes years. Most people have no clue about the benefits of upgrading their software, especially something like their browser. If they are using IE then they are even less likely to upgrade since IE is a default OS browser, so they are probably much less tech savy to begin with. Take the initiative, if the sites that people visit stop working and they get a nice little message that they need upgrade to a newer version then are probably will…even MS cuts off older OS’s after awhile.

  3. Nick Says:

    Hmmm the FU approach failed in the late 90s and will be even less successful now. If I am at work and I can’t view a website in the corporate browser IE6. Because it is the only browser that can access the Human Resources and Financial systems and I can’t upgrade or use another browser because it is a corporate environment and everything is locked down. So what do I do, email the URL home to access it there or use my phone to access the site, not likely if the site does not work in IE6 what chance IE on WM6? No I will go to another site for the information.

    The 25% or so of all IE users still using IE6 are a mix of corporate clients who can not upgrade because it will break (or fear it will break) other systems, people with older systems (still XP though) who do have auto updates turned off and do not manually update and surprisingly for me the number of people with new netbooks like the ASUS eee or Acer Aspire One running a lightweight version of XP with IE6 as the default browser. While the first two groups are on the decline, the third group is growing.