Wrapping delimited lists, fluid rows

I won't dump my entire backlog of ideas here in one go, but here's something
that's troubled me without solution: imagine a list with a visual delimeter set
to display horizontally:

   ul.menu li { display: inline }
   ul.menu li:after { content: " |  " }
   ul.menu li:last-child:after { content: none }

A given list might look like:

   Foo | Bar | Baz

But if this list wraps onto a new line, you'll see a problem:

   Foo | Bar | Baz | Iddly | Diddly | We've | Run | Out |
            of | Names | For | This | List

The last item on the first row doesn't get its delimited removed.

I was thinking, can't we have a way to select :last-on-line and :first-on-line?

So then we can stipulate:

   ul.menu li:last-on-line:after { content: none }

Especially given my previous post on fluid grid support, we need a way to
replicate the table layout dynamically. Tables allow us to pull up our position
within the grid by reading off the HTML, e.g. tr:first-child (first row),
td:last-child (last cell in a row), but a fluid grid has no such concepts.
Without HTML to rely on, you have no way to get a handle on where you are within
the grid. You would of course need a few more selectors for this e.g.

   li:in-first-row { ... }
   li:in-last-row { ... }

I think it would be wonderful if we could finally move away from using tables
for grids of information where there is no relevance for, or need to define,
strict columns and rows.

Gradually we can reclaim <table> for tables of data only.

Received on Friday, 23 February 2007 15:56:12 UTC