Hacker News new | ask | show | jobs
by olavk 5526 days ago
I agree with you in general, but not in the case of CSS.

The CSS layout model were indeed based on exactly the layout properties of "presentational HTML" which people were using for style and layout at that time. It was just made more fine grained, and separated from the markup.

For example, the much hated "float/clear" layout model were based on the align="left|right" and clear="left|right" attributes which Netscape (I believe) introduce on img- and table-elements, and which people did use a lot. The layout model of tables were also widely used, and that was codified with the display:table-* properties, which again provides exactly the same layout model in CSS as tables provided via markup.

The problem was basically that IE development were frozen for many years. IE implemented the float-related CSS before the freeze, but not the table-model. I believe IE 8 were the first version of IE to support the table model, more than a decade after CSS2 became a recommendation.

This resulted in period of many years where the float model were supported via CSS in most browsers, but the table-model were not. This in turn resulted in an amazing amount of confusion, and people believing that floats are somehow the CSS's substitute for tables.

2 comments

display:table- always felt more like a hack than as something part of the design.

As in "Oh, we forgot to model certain properties of tables that numerous websites actually use. Here's a workaround that imitates a table cell until we get around to figuring it out. PS: tables are still bad."

> PS: tables are still bad.

Tables are not bad.

CSS purists state that using table markup purely for layout purposes (e.g. for positioning a page footer) is bad, because it violates the separation between content and presentation. In that case display:table-* will give you the same layout (neither worse nor better!) but without requiring any specific markup in the html.

But this poses a dilemma for web developers, because display:table-* is not supported by all browsers, so some specifc kinds of layout can only be achieved with table markup.

Developers had to choose between (1) compromising the layout (2) compromising the semantic/style separation or (3) use complex workaround like the CSS frameworks, which tried to emulate the table-layout model without requiring display:table support in the browser. Neither is optimal.

I think you're misremembering history. It's not bad because 'it violates the separation between content and presentation', it's bad because you end up with tag soup. The table's demise was purely that it was too hard to maintain in anything more than a trivial layout. When you started getting down to your third nested table it was a friggin' nightmare. Also cells and rows had weird quirks as well as missing properties where you'd then have to nest a span in every cell just to get it behaving properly. Oh and also the occasional sacrifice to the dark god of 'table-layout:fixed'.

The rest of it though I agree with you.

But I think we agree. Layouts with nested tables are hard to maintain because presentational concerns (like the attributes which defines cell sizes) is spread all over the document and intermingled with the content. It's a mess.
FYI, the reason why is that IE4 was released before CSS2 became a recommendation, and in fact implemented CSS1 (with bugs, but that is partly because it needs to be compatible with IE3) plus CSS-P: http://www.w3.org/TR/WD-positioning-19970819