Infrequently Noted

Alex Russell on browsers, standards, and the process of progress.

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):


Or you can use grouping to get nicer form layouts:

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!