Why is all I know about CSS Wrong?

This October (2008) saw the SitePoint publication of ‘Everything You Know About CSS Is Wrong’ written by Rachel Andrew and Kevin Yank. Though I’ve yet to read the book its contents have been making there way onto an array of web development sites such as thinkvitamin.com. What the book essentially aims to promote is a way of building web layouts using a techniques known as CSS Tables. Without getting into too much depth the techniques allows you to use CSS to define layouts in the same way you’d expect to code a HTML table but using CSS attributes such as display:table-row and display:table-cell.

It is hoped this technique will make it easier for those people still building websites in tables to move to CSS but it’s also seen as an alternative to using float. Floats in CSS were primarily for wrapping text around images, and not for layout. As such this led to issues such as the IE6 double margin issue and the clearfix problem when people started using them for layout.

Better than Floats?

Pretty much every site I’ve built over the past 2+ years has used floats, and I feel I’m pretty proficient in using them. So if I’m happy with floats what are the benefits for me in using this technique?

Truthfully there are little to no benefits for me in using CSS Tables other than simplifying the process of laying out a website and removing some of the issues associated with floats. The benefits are mainly for those developers still using HTML tables or those who have issues when developing using floats. CSS Tables provide a technique that is more widely understood by matching the CSS to the structure of a HTML coded table.

So will I change the way I build websites?

No.

Although I have no proof the method I build websites seems uncommon. The common method is to build a site top-down, left to right. This is perfect for using CSS Tables but the when using a content-down approach.

Let me explain. Rather than my source code matching the layout of the design (e.g Header, Navigation, Content, Footer) my source code is ordered differently putting the content as highly in the source code as possible, this results in my header almost bottom of the source code. I then use different positioning techniques including floats to organise the elements around the page, giving the same visual effect as any normal website. This has benefits for search engine optimisation and accessibility. While CSS Tables can be used in this method for some layouts this technique cannot replace floats for the purpose I use them for.

The Internet Explorer Problem

The reason this technique is being promoted is not because it is new, but because with the launch of Internet Explorer 8 it will then be supported my all the major leading browsers. This is great, but unless all IE6 and 7 users install IE8 on launch won’t it be just another CSS technique we have to wait 5 years to use?

Those that advocate the technique don’t think so, their way of supporting IE6 and 7 is through supplying a second layout through conditional comments using the old techniques, outputting a simpler layout if necessary. The idea is that even though you must spend time coding the same layout twice the time saved in not having to fix browser quirks will make up for it.

I have an issue with this.

Not only does creating two layouts seem time consuming and repetitive, but providing a simpler version seems to go against the ideas of Progressive Enhancement that so many developers have promoted. The frustrating thing is some high profile developers and websites have promoted both Progressive Enhancement and simplified layouts for IE when using CSS Tables. For many developers starting out this has got to be confusing.

When using new CSS techniques it’s always best to ensure that as many users get the same experience as possible, if a technique doesn’t allow you to do this you should ensure using the technique is the best thing for all concerned.

Will I be using CSS Tables?

From the way I’ve written the above it’s fairly obvious I won’t be using CSS Tables for the time being. My coding methods mean I’ll probably never use them fully, but until I can use them without having to use alternatives to support older browsers also I will carry on using the technique I know work.

The way I do build websites is rare and so my situation isn’t typical, and of course this is only my opinion. How would CSS Tables work for you? And will you start using them?