While HTML5 has been getting most of the attention lately, CSS 3, the other half of the web developer's toolkit for next-generation web pages has been progressing as well.
Although the CSS Working Group has taken a fair amount of flack from the development community over the years, despite the Working Group's lack of transparency and refusal to engage the community, the actual implementers -- Apple, Mozilla, Opera and Google -- continue to push CSS 3 toward the mainstream.
One of the more interesting aspects of CSS 3 is the new Flexible Box model spec which essentially allows you to define how unused portions of block level elements are handled. Sound confusing? Well, initially it can be. Fortunately, Alex Russell of Dojo fame has put up a nice guide to using the new flexible box model.
Essentially, two new CSS 3 selectors, hbox and vbox, allow you to easily center an element within its parent element. Then, as the spec says, "unused space can be assigned to a particular child or distributed among the children by assignment of 'flex' to the children that should expand." In other words, you can make some child elements flexible and others fixed, which makes for considerably more complex layouts using only a fraction of the code you'd need to do that using pure CSS 2.
One thing to keep in mind: selectors like hbox and vbox are not universally supported yet, so if you need everything to work in IE, this method is off limits. However, hbox and vbox do work in Gecko and Webkit, which means these tricks will work just fine for Safari, Firefox and Chrome. Opera is only progressive browser missing from the list.
As Russell points out in his write-up, while universal support is still a ways away, these techniques could be used in mobile interfaces where Safari and Chrome are prevalent.
See Also:
