CSS 3: Progress! (Updated)

I’ve been in a pretty heated email conversation over the past couple of days regarding how effective (or not) the CSS Working Group has been. I’ve been pretty brutal in my critique in the past (and much of it still stands), but there’s reason to hope.

The best bits are — not surprisingly — being driven by the implementers. Apple is in the driver’s seat, with major contributions for Animations (including keyframes!), 2D Transforms, 3D Tranforms, and Transitions. Great stuff.

Similarly, David Baron (of Mozilla fame) is editing a long-overdue but totally awesome Flexible Box spec, aka: “hbox and vbox”. Both Gecko and WebKit-derived browsers (read: everything that’s not IE) supports hbox and vbox today, but using it can be a bit tedious. Should you be working on an app that can ignore IE (say, for a mobile phone), this should help make box layouts a bit easier to get started with:

/* hbox and vbox classes */
 
.hbox {
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-align: stretch;
 
	display: -moz-box;
	-moz-box-orient: horizontal;
	-moz-box-align: stretch;
 
	display: box;
	box-orient: horizontal;
	box-align: stretch;
}
 
.hbox > * {
	-webkit-box-flex: 0;
	-moz-box-flex: 0;
	box-flex: 0;
	display: block;
}
 
.vbox {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-box-align: stretch;
 
	display: -moz-box;
	-moz-box-orient: vertical;
	-moz-box-align: stretch;
 
	display: box;
	box-orient: vertical;
	box-align: stretch;
}
 
.vbox > * {
	-webkit-box-flex: 0;
	-moz-box-flex: 0;
	box-flex: 0;
	display: block;
}
 
.spacer {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
}
 
.reverse {
	-webkit-box-direction: reverse;
	-moz-box-direction: reverse;
	box-direction: reverse;
}
 
.boxFlex0 {
	-webkit-box-flex: 0;
	-moz-box-flex: 0;
	box-flex: 0;
}
 
.boxFlex1, .boxFlex {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
}
 
.boxFlex2 {
	-webkit-box-flex: 2;
	-moz-box-flex: 2;
	box-flex: 2;
}
 
.boxGroup1 {
	-webkit-box-flex-group: 1;
	-moz-box-flex-group: 1;
	box-flex-group: 1;
}
 
.boxGroup2 {
	-webkit-box-flex-group: 2;
	-moz-box-flex-group: 2;
	box-flex-group: 2;
}
 
.start {
	-webkit-box-pack: start;
	-moz-box-pack: start;
	box-pack: start;
}
 
.end {
	-webkit-box-pack: end;
	-moz-box-pack: end;
	box-pack: end;
}
 
.center {
	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;
}

I’ve been using these rules for some time to good effect. You can use them to easily visually center things (for example):

1
2
3
4
5
6
<div class="hbox center">
    <div class="vbox center">
        <div>...</div>
        <div>...</div>
    </div>
</div>

Or you can use grouping to get nicer form layouts:

1
2
3
4
5
6
7
8
9
10
11
<form action="handler.cgi" method="POST" class="hbox">
	<div class="vbox">
		<label>First Name (required):</label>
		<label>Last Name:</label>
	</div>
	<div class="vbox">
		<input type="text" name="first"/>
		<input type="text" name="last"/>
		<input type="submit"/>
	</div>
</form>

It’s unfortunate that this stuff is “medium priority”, but at least it’s moving forward in the WG.

Update: Fixed the examples and rules to use box-pack: center;, per Dave Hyatt’s excellent suggestion!

15 Comments

  1. Ms2ger
    Posted August 21, 2009 at 11:11 am | Permalink

    You might be able to ignore IE on mobile, but Opera is pretty strong there, and they don’t support flexbox – yet.

  2. fantasai
    Posted August 21, 2009 at 12:52 pm | Permalink

    Opera’s interested in supporting flexbox, but they’ve been holding off until there’s a spec (I’m told WebKit and Mozilla’s implementations have many differences). Flexbox has been on the CSSWG radar for years, it’s just no one has stepped up to edit the spec. (It’s not an easy spec to write.)

  3. Posted August 21, 2009 at 8:26 pm | Permalink

    The spacer divs in your example are unnecessary (and are going to confuse people into thinking flexbox requires extra elements just to do spacing). You can use box-pack:center. ;)

  4. Posted August 21, 2009 at 8:58 pm | Permalink

    Good call! Post updated.

  5. Posted August 22, 2009 at 6:56 am | Permalink

    Whoa! This is awesome. This is pretty close to what I’ve been looking for in terms of application layout in html/css. I wish people would spend time talking about this first before we get all excited about custom fonts and css gradients. Stuff like this is way more useful. Thanks for sharing.

  6. Posted August 22, 2009 at 1:05 pm | Permalink

    I can’t wait for CSS3 attr() support in WebKit (https://bugs.webkit.org/show_bug.cgi?id=26609). Then we can simplify this a lot. No need to add all those special class rules for flex

    .hbox, .vbox {
    -webkit-box-flex: attr(flex, number);
    }

    The proposed spec for attr does not yet cover keywords. Keywords are needed for box-pack, box-orient, box-align, box-direction and box-lines.

  7. Posted August 22, 2009 at 1:07 pm | Permalink

    <div class=vbox flex=2>…</div>

  8. Mart
    Posted August 22, 2009 at 6:02 pm | Permalink

    I dont see why people get excited with css animations, CSS is not supposed to be used for that

  9. Posted August 22, 2009 at 6:10 pm | Permalink

    Mart:

    “CSS is not supposed to be used for that” is what has kept CSS from crawling out of the primordial pit for nearly a decade. It’s really too bad that our expectations have been lowered so far.

    That said, if there’s some *other* part of the web stack that you think should take this one natively (and no, JavaScript doesn’t count), then I guess I’m all ears.

    Regards

  10. Bilgehan
    Posted August 23, 2009 at 2:14 am | Permalink

    CSS animations and transformations are nice but i think easy and proper positioning without using hacks should be first priority for CSS3 spec. The reason most people still use tables is that it is so intuitive.

  11. Billy
    Posted August 24, 2009 at 9:29 am | Permalink

    @Bilgehan: Tables are only intuitive if that’s what you learned first. For those of us that started with CSS layouts, table layouts are mind boggling.

    Anyway, this is the first I’ve heard about flexboxes and I’m excited to see it added to CSS3.

  12. Benjamin Hawkes-Lewi
    Posted August 25, 2009 at 10:27 am | Permalink

    “nicer form layouts”

    Hmm. Hopefully, it can it be used to do this without the result being jumbled when publisher CSS isn’t applied…

  13. David Reese
    Posted August 26, 2009 at 7:49 am | Permalink

    “nicer form layouts”

    As Benjamin H-L hints, this makes me nervous about what this form “looks like” without the CSS — for example, in a screen reader. Some of us remember how with css-based layouts we could finally have control over source order; this form is a step backward in that department.

    Maybe an out-of-order form isn’t the best example for using vboxes?

  14. Posted September 25, 2009 at 1:15 pm | Permalink

    Hi,

    Thanks for this article. I was just trying this on a chrome extension and wasn’t able to nest boxes and flex some of them. The problem was that display:block for box children was overiding display: -webkit-box. I added !important to the latter and now it works.

    Hope this helps ;)

    Marcos

  15. Posted October 14, 2009 at 12:48 pm | Permalink

    I prefer template layout to flexible box layout, it’s more intuitive. I’ve blogged about it a while ago [1].

    Some kind of solution is sorely needed, layout is *the* major pain point of Ajax right now.

    [1] http://2ality.blogspot.com/2009/07/css-layout-soon-good-enough-for-guis.html

7 Trackbacks

  1. By Ajaxian » CSS 3 Flexible Box Model on August 23, 2009 at 4:24 am

    [...] latest post shows this as he talked about CSS 3 progress and specifically the flexible box model that Mozilla and WebKit have had forevaaaaaah: David Baron [...]

  2. [...] Více viz CSS 3: Progress! od Alexa Russella. [...]

  3. [...] swiftly to become a recommendation.I owe a huge debt of thanks to Alex Russell’s article, CSS3: Progress!, which explained the syntax clearly to me.Read more articles like this on my blog, Broken [...]

  4. [...] owe a huge debt of thanks to Alex Russell’s article, CSS3: Progress!, which explained the syntax clearly to [...]

  5. [...] owe a huge debt of thanks to Alex Russell’s article, CSS3: Progress!, which explained the syntax clearly to [...]

  6. [...] owe a huge debt of thanks to Alex Russell’s article, CSS3: Progress!, which explained the syntax clearly to [...]

  7. By CSS3: Flexible Box Layout Module - TomStardust.com on October 14, 2009 at 9:31 pm

    [...] altro articolo interessante a riguardo è sul blog di Alex Russel, che ha preparato un foglio di stile su misura per avere già pronte tutte le classi [...]