Ben Ward

CSS3 Advanced Layout

. Updated: .

Can you say “Grids”?

Please don’t take this the wrong way but CSS ‘layout’ as we know it today… well frankly it sucks a bit. I mean, consider the grief we go through to get multi-column designs working? Hacking around with floats? Changing the order of our content to make it work just right?

It’s more powerful than misusing <table /> once was (and obviously cross-device compatible, accessible and so forth), but you could have it so much better.

Introducing the CSS3 Advanced Layout Module. It’s a working draft and it’s very open about the fact that there are a number of ways to make it all work. But it exists, that’s the main thing.

Most interesting in the new module is what’s been called Template Based Positioning, which allows you to define grids. Grids have a slots, and you can place any element on the page into a slot. That’s content order independence covered, by the way.

Here’s an example quoted from the draft (please note that I’ve reformatted the CSS for legibility):

Here is how the ‘zunflower’ design of the Zen Garden could be done:

#container { display: "abc" }

#intro {
  position: a;
  margin-right: -2em;
  box-shadow: 0.5em 0.5em 0.5em;
}

#supportingText {
  position: b;
  box-shadow: 0.5em 0.5em 0.5em
}

#linkList { position: c }

If you read down the Templates draft you’ll notice that the syntax gets rather more advanced that than too, but this preferred syntax isn’t really too far removed from drawing the layout with ‘ASCII art’. Sounds a bit hacky, perhaps even silly but I think it’s a good move; it’ll be very easy to explain and grasp. Much similar than a reworked implementation of the &lt;table>&lt;tr>&lt;td colspan="12"> syntax, certainly.

Another couple of examples, this time mine. This means they might be wrong, but I think I understand it right. You’re very welcome to view the CSS of this page to see how the layout is done at the moment. In theory, layout could be reduced to this:

body {
  display: "aa"
           "bc";
           "dd";
}

#header { position: a; }
#content { position: b; }
#sidebar { position: c; }
#footer { position: d; }

I hope you can see what I mean when I say that this might just be crazy enough to work. Grids can also be defined for other elements, not just the body (or html). For example, rather than floating the accompanying graphic that appears with my posts, I could (if I wanted) do this:

#content .post {
  display: "@a"
           "@@";
}

#content .post img.splash {
  position: a;
}

‘@’ represents any content that isn’t otherwise positioned in a named slot (so the image is placed in ‘a’ and everything else in a post flows through the ‘@‘s). The syntax is then further extended to specify widths on these slots (my examples above aren’t complete for rebuilding this site as widths would be divided equally).

The benefit in this example over using a float is zero, unless I wanted to include the splash image somewhere else in my code than at the very top. But it has rather fancier applications that can be covered another day.

This is a huge, huge, huge thing for CSS. Having a simpler and less quirk-prone layout model will make all of our lives easier, and should make CSS easier to learn as well. Once it’s implemented (yes, I know…).

There’s lots of work to be done, and obviously we’re a way off seeing an implementation (but if there’s demand I guess we may see something testable in medium-term Gecko or WebKit builds). Comments are welcome to the CSS public mailing list as usual.

(The accompanying image is India by Omnia Mutantur on Flickr. Used with permission.)

Comments

Previously, I hosted responses and commentary from readers directly on this site, but have decided not to any more. All previous comments and pingbacks are included here, but to post further responses, please refer me to a post on your own blog or other network. See instructions and recommendations of ways to do this.

  1. Tabrizi

    This gives me some faith in the whole CSS layout thing but how long will it take to be implepented… 10 years?

    Im quite angry really that browers and CSS Layout are so far apart. Why? Why? Why?

    You spend ages making a complex Nested DIV layout only to find out that it looks terrible in IE and fine in Firefox. You try to sort it out only to find hacks to solve the probem. I dont want to use hacks for professional client websites!!! Isnt the term hacking something dodgy? hello?

    This whole revolution in design for web seems stuppid when things dont work and require hacking to solve. I might just stick to validating table designs and flash based sites. CSS seems a little to big for its boots and needs to grow up!

  2. Daaaave

    I’ve been told many times that CSS is the future. Well I agree, it’s the future, not now. Positioning in CSS sucks and I have yet to find a fluid CSS layout that doesn’t break one way or another.

    If CSS positioning had been thought out properly much earlier then we probably wouldn’t be in the mess we are in today.

  3. Ben

    I’m not sure I’d be quite as harsh as that. CSS3 Advanced Layout Module most certainly is the future and it most certainly is much more robust than what we have now. But CSS is now too; that’s the just the truth of the matter.

    CSS positioning in 2006 is harder than it could be but many thousands of authors have got it sussed; there’s no going back. It’s unfortunate that CSS isn’t quite pick-up-and-play, but this is also a tool of a skilled profession and therefore it doesn’t seem unreasonable to me that it requires some commitment to gain proficiency.

    I’m not convinced that we’re ‘in a mess’ at all.

  4. Vogateer

    It drives me crazy when someone blames CSS for Internet Explorer’s horrible implementation of it.

    I just finished changing a forum’s table layout to CSS, and I personally can’t wait for the day that tables as presentational layout is a horrible, distant memory.

    If this advanced layout module takes hold, I’ll start using it immediately, since on my forum people can pick how they want things displayed. If you use a broken browser like Internet Explorer, then you simply can’t take advantage of the goodies.

  5. Luziphir

    I blame CSS for Internet Explorer’s, Opera’s, Firefox’s, Konqueror’s, and Safari’s horrible implementation of it. CSS for positioning anything but the most basic layouts (and even for some of those, it’s awful) is terrible, illogical, and a waste of time and effort. CSS is the reason that more and more web sites are fixed width these days, except for very simple layouts, fluid width simply isn’t possible, or is far too convoluted for anyone to consider working with (and this is in compliant browsers). Even with compliant browsers, one usually has to use so many strange “hacks” and nested divs that the code is neither “correct” nor does it separate layout from content (which is incredibly stupid and irrelevant anyway since any site with a decent amount of content will be using a database or server side includes at the least unless they are completely incompetent).

    Finally, all of the above is irrelevant. You can bitch and moan about how it’s Internet Explorer’s fault (which isn’t even true) as much as you want.

    In the end, this is all supposed to be about doing a professional job, is it not? Exactly how professional is it to ignore 90% of your audience?

  6. Ben

    To be honest, one of the strongest parts of this Advanced Layout proposition is that because the definition of the layout is defined using a single feature of CSS — rather than the current situation of combining margins/floats/positioning together — it will degrade far far more gracefully into a single column layout. Of course we’ll still be doing it the current way for a while yet, but when the day comes switching to using CSS3-AL will not break the content in unsupporting browsers.

    That’s a huge plus over current CSS layout in legacy browsers like IE5 (PC and Mac), Netscape 4 and so on, which are now sacrificed by illegibility as their partial support for the cocktail of properties used in layout produces incomplete and unpredictable results. CSS3-AL won’t suffer from that. The layout will disappear in old browsers, but the the colour, graphics and typography will remain. It’s a far better implementation for how the web is supposed to work.

You can file issues or provide corrections: View Source on Github. Contributor credits.