• 200911 Apr

    The CSS Working Group had a face-to-face meeting in Tokyo last month and made a series of resolutions (which can be found on their blog). Most are fine technical points, but one of the more interesting is that the multi-column layout module is about to be reissued as a ‘last call’ document; after this, the module will be released as a candidate recommendation, meaning the authors are satisfied that the standard does what is needed of it, and will call for implementation.

    As you may know, Webkit browsers (Safari, Chrome, etc) already support multi-column declarations (with a -webkit- prefix) and Gecko browsers (Firefox, Camino, etc) partially support it (with a -moz- prefix) – and fuller support will be forthcoming in Firefox 3.5. With those implementations in place, I’m hopeful that it will pass quickly through the recommendation process and become a standard.

    Last week saw another layout proposal, the template layout module, reissued as an updated working draft. Previously known as the advanced layout module (and featured in our article How We’ll Lay Out Websites in 2016).

    As a quick reminder, template layouts allow you to assign content to ‘slots’, which can then be laid out by declaring a grid using alphabetical characters. The following code would set up a two row grid, with the top row spanning the three individual columns of the bottom row:

    body {
    display:
    'aaa'
    'bcd';
    }

    You could then match elements to each slot by using pre-existing selectors and the position attribute:

    div#div1 { position: a; }
    div#div2 { position: b; }

    And also use the new slot pseudo-class to apply styles:

    body::slot(a) { border: 1px solid; }

    This is probably the most radical proposal since the CSS standard was first created, allowing for very flexible template layouts, and I’m quite excited about it. However, it currently has no implementation, so is doubtless a long way off. Perhaps my satirical date of 2016 is not too wide of the mark after all.

    You can skip to the end and leave a response.


  • Comments

    • 01.

      And column layouts are useful on the web exactly … never?

      It doesn’t work with scrolling. It doesn’t make any sense. You start reading the first column, scrolling as you read, and then … well you have to go out of your way to get to the beginning of the second one. Awesome. Not.

      Columns are yet another example of CSS and HTML committees missing the point completely. HTML+CC is not so much used to render documents — there’s PDF, XSLFO and ODF for that — but to render interfaces to web applications, which, in fact, include interfaces to read and browse documents. And what’s missing from the standard is XUL’s layout tags and their CSS equivalent: hbox, vbox, grid and @flex.

    • 02.
      Michael "Print" Howell says:Comment » April 11th, 2009 at 2:58 am

      CSS/HTML are not only meant for displays, they’re also meant for print. That’s also what the CSS3 print stuff is for. Personally, I think that’s where the columns belong: in CSS3 print.

    • 03.

      Just reminds me of the antiquated tables in HTML honestly ~ a little more advanced.
      Not to interested in this release honestly.

    • 04.

      Comment does not support Chinise?

    • 05.

      Well, I don’t really care about multi-column layout aside from print (as already said) and even then. Template layouts looks much more promising.

    • 06.

      Templatelayout allows for more complicated layouts than tables:

      aaaa
      bccd
      bbdd

      And – crucially – it removes the layout rules into the presentation layer where they belong.

      As for multi-column, it definitely has a place; I’ve used it very successfully on one of my sites. Just because you can’t immediately think of a use for it, doesn’t mean no-one else can.

    • 07.

      Webkit browsers (Safari, Chrome, etc) already support multi-column declarations (with a -webkit- prefix) and Gecko browsers (Firefox, Camino, etc) partially support it (with a -moz- prefix) – and fuller support will be forthcoming in Firefox 3.5.

      how about IE?

    • 08.

      @dudo: IE don’t usually adopt any new CSS standards until the recommendation is mature, and test cases have been provided. While I’d love to see them be more adventurous with using -ie- prefixes in IE8.1 (if such a thing exists), I wouldn’t expect to see that any time soon.

    • 09.

      As for multi-column, it definitely has a place; I’ve used it very successfully on one of my sites. Just because you can’t immediately think of a use for it, doesn’t mean no-one else can.

      I’m sure it’s going to be hacked succesfully into doing something it was not meant to do in the first place, and most likely only because the CSS3 specs is deficient for doing things that people actually need on the web. (Reflowing text columns is not one of them)

      The Web = user interface for applications. The web is not for displaying mere “documents”. Even Wikipedia, an encyclopedia for crying out loud, does not display “documents”: it provides an interface for reading and writing an encyclopedia. The “document” is what you see in the middle of the page, but everything else, search boxes, buttons and interface links are not part of a “document”; yet HTML/CSS keeps on treating those as second class citizens.

      Again, I suggest you take a look at Mozilla’s XUL layout model, which is also available to HTML with the right -moz- CSS, and you will see that it would make much more sense to integrate that into HTML than reflowing columns, which are a newspaper type of graphic device, not web.

    • 10.

      The example you used in your first comment, of having to continuously scroll the page up and down to read the text, is an example of a bad use of multi-column text; that’s not to say there aren’t good examples, though. If you take a look at a portfolio site I made last year (with Firefox or Safari) you can see that it works well for short blocks of text, and in this case increases the readability by making the lines shorter and not making the user scroll.

      If you’re looking at multi-columns as a replacement for a proper page layout mechanism, you’re looking at them wrong; they are an extra tool to lay out blocks of text.

    • 11.

      The majority of the text content on the internet is in document form, I wouldn’t say CSS was created to style “web applications” considering that “web applications” are a new thing, while CSS has been around for much, much longer.

      Of course, when I say “web applications”, I mean stuff like Gmail, simply adding a search box or a navigation bar to a page doesn’t make it an application.

    • 12.

      @Peter Gasston: I looked mentioned portfolio site and I must say that your ‘works well’ somewhat subjective. I would actually prefer normal lines of text there. 4-5 words per line is way too short.

    • 13.

      Great work !

      These layout models are cruelly missing in CSS. And I think these two specs are excellent, especially template layout module.

      Shame on those who are grumbling. Don’t use it if you don’t know how to appreciate it.

    • 14.

      I personally like the template layout module as it seems to solve the problem of ‘source order dependence’. It could work rather smoothly if a site needed to be redesigned.

    • 15.

      I think multi-column text can work in certain situations but there’s a few things you’d need to be aware of like widows (as in your example Peter) and what happens when you increase text size (probably wouldn’t want to use it on a fixed-width site as you could end up with only one or two words per line at larger text sizes).

    • 16.

      I can see both sides of the argument here. On one hand, I can see this being used in the a wrong way, and yes it will probably be hacked to do something it’s not made for – but hey, that’s to be expected with anything in terms of web design and development. In fact, sometimes these little hacks make the web easier to use :P

      In terms of layout and design, columned layouts (when used properly) could be an advantage. The theory that it would make reading text and browsing the net painful, and that it isn’t logical in terms of scrolling is a design issue, not an exclusive problem with columned layouts – and you don’t have to know anything about CSS etc to understand that.

      Aside from the above points, in the corporate world (speaking from experience here :P) Marketers don’t care what is ‘web standard’ or what ‘is better for the user’, and they shouldn’t either – that’s our job. In many cases, all they want is their mini-site to look like a Print ad.

      Just my thoughts.

    • 17.

      [...] you want to get a taste of using the CSS 3 Template Layout module, Alex Deveria has written a jQuery plugin which implements the [...]

    • 18.

      [...] you want to get a taste of using the CSS 3 Template Layout module, Alex Deveria has written a jQuery plugin which implements the [...]

    • 19.

       I’ve produce a specification and sample implementation in Chrome of a layout model that uses JavaScript in CSS. It is based on my Master’s Thesis from way back in 1996, when CSS was in its infancy, and unknown to me, and JavaScript did not exist.

      I’d like to know what you think?

      http://blogs.eforceglobal.com/dkarisch/archive/2009/07/16/536.aspx

    • 20.

      [...] some of the more bizarre elements of CSS3. The weirdest of these by far was the css3 template module, a quirky new way to define a web page layout by drawing an ASCII art blue print (complete with [...]

    • 21.

      [...] written a new post on CSS3.info (the first for a long time), on the subject of the progression of a couple of layout modules through the W3C recommendation process. It’s actually a bit more exciting than I’ve just made [...]

    • 22.

      [...] zum Slot-Layout Konzept erfahrt Ihr auf css3.info und natürlich der dazugehörigen Working-Draft Website des W3C! Seid Ihr auch so [...]

Hosting by: