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 fin­ished read­ing Everything you know about CSS is wrong! by Rachel Andrew and Kevin Yank. The title was choosen to be con­tro­ver­sial, the book is about using CSS tables for layout.

Like most people I have avoided using or even learn­ing about CSS tables for lay­out, because CSS tables are not sup­por­ted by IE6 or IE7. Rachel and Kevin argue that because IE8 will sup­port CSS tables you should start using CSS tables now, I disagree.

Are CSS tables ready for prime time?

In my opin­ion 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 pop­u­lar browser. IE6 still accounts for 25% to 33% of all Inter­net Explorer traffic to sites I have stat­ist­ics for. Which means 10% of all vis­its to this blog and nearly 25% of all vis­its to work are done using IE6. So I expect that two years after IE8 is released a sim­ilar pro­por­tion of 10 to 25% all traffic to a web­site will be with IE6 or IE7.

Rachel and Kevin recom­mend that you use build sites using CSS tables and then use con­di­tional com­ments to provide IE6 & IE7 with a stylesheet that either provides a sim­pli­fied lay­out for IE6 & IE7 or uses todays cur­rent tech­niques like floated lay­outs to provide an equi­val­ent lay­out. I can not see myself provid­ing a sim­pli­fied lay­out for IE6 & IE7 in the next 2 years, while those browser main­tain a sig­ni­fic­ant mar­ket share, par­tic­u­larly as my bosses all cur­rently use IE6.

I strongly dis­agree with Rachel and Kevin in provid­ing an equi­val­ent lay­out using tricks, hacks and floats for IE6 & IE7, while using CSS tables for other browsers. Rachel and Kevin say this will save time, bat­tling browser incos­ist­en­cies. First you will have to build a site in CSS tables, then build it again for IE6 & IE7 in a totally dif­fer­ent way. I believe that would be a waste of time, because the browser incon­sist­en­cies usu­ally occur with IE6 & IE7, so if you build it right the first time using floated lay­outs, you only need to make minor adjust­ments for IE6 & IE7. Instead of build­ing it once using CSS tables, then build it a second time using float lay­outs and adjust­ing for IE6 & IE7 incon­sist­en­cies. Build it once, build it well and it will be quicker and more reli­able than build it twice.

CSS tables are not a pan­acea for all lay­out woes, Everything you know about CSS is wrong! does explain the lim­it­a­tions of CSS tables. If you are an old school hack like me who built sites with HTML tables last cen­tury. You will see that while CSS tables have some advant­ages, they also have dis­ad­vant­ages over HTML tables. There is no colspan or rowspan, so you end up with end­less nes­ted CSS tables, when you could the same job with a single HTML table.

Add this to the dif­fer­ent browser inter­pret­a­tions of anonym­ous tables ele­ments and the inab­il­ity to abso­lutely pos­i­tion ele­ments within CSS table ele­ments. And you will find CSS table lay­outs even more bloated than a float lay­out with extra divs for hooks and as dif­fi­cult to code or maintain.

Another issue I have with this book is the assump­tion that the only browsers that can not deal with CSS tables are IE6 & IE7 and everything will be all right once IE8 achieve dom­in­ance. What about mobile browsers. While the latest ver­sions of Mobile Safari and Opera Mobile might sup­port CSS tables, how many of the other numer­ous pop­u­lar mobile browsers sup­port CSS tables, not IE for Win­dows Mobile 6.

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

Well it is a good intro­duc­tion to CSS tables, detail­ing the advant­ages and dis­ad­vant­ages. I might dis­agree with the under­ly­ing assump­tions and Rachel and Kevin con­clu­sions. How­ever, it has got me think­ing about using CSS tables to get cer­tain out­comes in designs and then rep­lic­at­ing the res­ults in IE6 & IE7 using a con­di­tional com­ment, a little CSS and JavaScript.

If you are a dino­saur still build­ing web­sites with HTML tables, this book will not make you take the jump to CSS lay­outs, because CSS table lay­out are not that simple and you still need to learn about floats, abso­lute and rel­at­ive pos­i­tion­ing and other fun CSS things. Plus do you really want to build sites that will not look right in a large num­ber of vis­it­ors browsers for the next couple of years.

The sec­tion of the book that got me excited was CSS3 Grid Pos­i­tion­ing Mod­ule it is only work­ing draft and no browser has imple­men­ted it, but it is the game changer as far as I am con­cerned for build­ing web pages and if IE8 sup­por­ted Grid Pos­i­tion­ing, I know I would be using it on a reg­u­lar basis within 18 months of IE8 release, if not sooner. What is offered by CSS tables is minor by comparison.

That is what dis­ap­poin­ted me about the book, there is noth­ing 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.

Tech­nical books I own get split into two groups, good ref­er­ence books like Eric Meyer’s CSS: The Defin­it­ive Guide, Jeremy Keith’s DOM script­ing and James Edwards
& Cameron Adams#8217; The JavaS­cript Antho­logy: 101 Essen­tial Tips, Tricks & Hacks which are battered and worn edi­tions that get reg­u­larly pulled out to help with pro­jects. And those that get read once and filed away. While an inter­est­ing read, Everything you know about CSS is wrong! is def­in­itely in the second group.

This entry was posted on Friday, November 28th, 2008 at 11:05 pm and is filed under css and html . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.