Finding examples of things that CSS can't do seems suddenly to be all the rage.
Here is my favorite example of something that is impossible in CSS but trivial with tables: a fluid layout with nested grids, such as what you need if you want to lay out a form inside a multi-column page.
Of course, there is display:table, display:table-row and display:table-cell, which makes these layouts as simple in CSS, while retaining content-layout separation.
ReplyDelete> while retaining content-layout separation.
ReplyDeleteNo, it doesn't. If you're going to use display:table you have to do something like this:
<div class=table>
<div class=table-row>
<div class=table-cell>
Cell1
</div>
<div class=table-cell>
Cell2
</div>
</div>
</div>
The layout is now defined by the HTML. To prove this, try making cell1 show up to the right of cell2 without changing the HTML.
CSS layout has *always* been a mishmash, with some layout information in the markup and some layout information in the content, and rightly so. I *want* the structure of the content to influence the layout, so that when I write "this and that" the order of the words influences their layout. I want it to look like:
this and that
or
this and
that
or
this
and
that
but not
that
and
this
There are lots of subtle implicit layout rules that are implied by the structure of the content. Many of those rules govern the relationship of elements relative to their siblings. CSS does not allow you to specify such relationships. Tables do.
There was actually a good solution in the comments of the linked article: http://limpet.net/mbrubeck/projects/justify-block.html
ReplyDeleteYour favorite example seems to have some red herrings.
Firstly, why nest these layouts, or pose the problem in terms of nesting? If you could compose the outer structure with CSS then is there something more difficult about composing it again inside itself?
You say that this is "what you need if you want to lay out a form inside a multi-column page." This is a misleading way to phrase it because it implies that forms are somehow a part of the issue.
I think there is a whole other discussion that could be had about why you would want to create a layout like that. It seems a matter of opinion since you couch it as being needed, but to me the layout looks contrived. Not that you can't find examples of that, but I think most examples you find in the wild will also be examples of bad design. I don't think this makes your example wrong, it's still a good example and I'm glad you posted it. The other reason that this is not an argument against your example is that my sense of design quality has been influenced by the limitations of CSS. I make this point more to shed insight on why I feel examples like these don't keep me up at night or make my life harder.
> Firstly, why nest these layouts, or pose the problem in terms of nesting? If you could compose the outer structure with CSS then is there something more difficult about composing it again inside itself?
ReplyDeleteBecause a lot of CSS layout cheats by hard-coding a parameter somewhere. Posing the problem in terms of nesting eliminates that cheat.
(Hard-coding a parameter is cheating because obviously you can create any layout in CSS if all the dimensions are known before you render.)
As for a reasonable use-case for a nested layout, consider a blog where you want to have a post that discusses CSS layout which includes an embedded example.
> This is a misleading way to phrase it because it implies that forms are somehow a part of the issue.
I think they are part of the issue, a major part in fact. Why do you think they aren't? Maybe I'm missing something really basic.