On the Lambda

Like most web people, I have tasted the Kool-aid, and it was good. I believe in the use of CSS for layout over tables (except, of course, for tabular data, which happens more than people realize). However, CSS is also known for being quirky and difficult to master, largely because of weak browser implementations. If you’re reading this, you probably just thought of Internet Explorer, but IE is not alone here. Even in the context of browser quirks I think CSS, with practice, holds up pretty well and is actually a very nice system… with one major exception.

CSS needs a way that is built-in and intuitive to support positioning an arbitrary number of block level elements visually side-by-side.

Let’s list out the requirements for what this feature should support, keeping in mind the spirit of separating content from presentation:

1. It should scale to any number of elements, not just two or three.
2. Multiple options for what to do as content gets wider or the window gets narrower: wrap, scroll, hide, etc.
3. When style dictates the elements wrap to a new “line”, this should happen such that the elements still follow the same flow, in an order that mimics how text would flow (including awareness of the current browser culture).
4. When styling dictates that elements wrap to a new “line”, you should be able to intuitively (and optionally) style them so each element on a new line will take positions below an element on the first line, so the result resembles a grid. If elements have varying widths, there should be multiple options for how to account for the space when an element further down is much wider than an element above it.
5. You should not need to do any special styling for the first or last element that is different from other elements
6. You should not need to add any extra markup to the document to indicate the first or last element, or to mark the beginning or end of the side-by-side sequence. We want the content separate from the styles, after all.
7. Since potential side-by-side elements are siblings, in a sense, it is reasonable (and possibly necessary) to expect them to belong to some common parent element, perhaps even as the exclusive direct children of that parent.

I want to point out here that I’d be surprised if everything or nearly everything I just described isn’t already possible today. However, it’s not even close to intuitive. It requires hacks and a certain level of css-fu not easily attainable for the common designer or developer, or over-reliance on systems like bootstrap.

I believe that what CSS needs — what it’s really missing — is for these feature set to be supported in a first-class way that is discoverable for new and self-taught web developers and designers, that works because this is the whole point for this specific set of style, and not because some designer figured out how to shoehorn something else to make it do what they wanted. This is the Elephant in the CSS Room.

I feel pretty comfortable with that requirement outline. Sadly, I no longer do enough web design to take the next step: thinking through how the exact styles and syntax needed to implement this should actually look. I definitely lack the influence to take the step after that: getting a proposal before the committee that could actually cause this to be accepted to the spec. And no one is in a position to take the final step: getting browsers to support this in a reasonable uniform way in a reasonable prompt time frame. All of that makes this post little different than rant… but a guy can dream, can’t he?