What's Wrong with the Web

  • IE6? PNG transparency doesn't work right.
  • CSS is a complete mess of a system, which doesn't specify how to handle a whole variety of different issues correctly. That'd be things like:
    • Scrollbars in overflow blocks
    • Centering of elements without resorting to margin tricks.
    • Z-Order handling (I mean, come on, a z-index? That's a little retarded).
  • Things which should be easy currently require at least a day of trial and error to get right (I mainly blame CSS for this)
  • Fonts can't be downloaded. Still. After 14 years. (Without browser-specific extensions).
  • CSS doesn't separate layout from the document any better than HTML did.

How do we fix it?

I want to see a new way of building web pages that completely ditches the old crap. Here's what I want to see:

A Tic-Tac-Toe style Layout Model

Every block should consume space from its parent using a tic-tac-toe grid type of arrangement. You should be able to specify which elements in that grid can stretch, and which ones are corner pieces which don't. And the center should fit the content.

Of course, we'd need ways to break out of this system and absolutely position elements - but this will handle the 99% case of the layouts people put together.

We'd also want a "flow-around" algorithm that lets you flow text around these elements, regardless of the layer they're on.

Element Grouping

Once you've built an element out of component pieces (like, for example, a nice button which stretches to fit the text on it, and has a drop shadow, etc), that element should be groupable. You can then modify the location of the entire group. In terms of rendering and mouse-handling, the group would render as a single unit.

You could also group groups together. Think of the way that most vector illustration programs work.

Element Templating

Once you've built an element out of pieces, you use a template to refer to it on your page. For example, if we have a Panel with a title, and a content block, and an associated sidebar, it'd look something like this: