The Future of CSS: Finally, Sane Layout Tools

Woolly, the CSS sheep.

HTML5 and CSS 3 offer web designers new semantic tags, fancy animations, server-side fonts and much more, but that’s

 

not the end of the story. The next major development in web design will likely revolve around one of the things neither HTML5 nor CSS 3 have yet addressed — page layout.

For all the great new tools in both technologies, the task of making page elements arrange themselves the way you’d like remains an imperfect process at best. Floats, absolute positions and the occasional bit of JavaScript will get the job done, but that’s a lot of code for something as basic as positioning elements on the page.

Surely there’s a better way. For example, wouldn’t it be nice if you could simply define a box and then position child elements within that box using a few lines of code? Perhaps something like this:

section { display: box;}section p#first { box-flex: 3;}section p#second { box-flex: 2;}

These CSS rules tell the browser that our section tag should be a box. Within that box are two paragraphs that should be displayed side by side, with one of them taking up slightly more space than the second. The browser calculates the width of the two p tags by looking at the ratio in the box-flex rule and then displays the results — no floats, pixel widths or other rules necessary.

If that sounds good to you then you’ll be excited to know that the code above will actually work in the latest versions of Firefox, Safari and Chrome, which all support the W3C’s Flexible Box Layout Module.

The catch — because there’s always a catch when it comes to emerging web standards — is that the W3C is planning a considerable rewrite of the Flexible Box Layout syntax. In other words, experimenting with the Flexible Box Layout rules is fine (and vendor prefixes are your friend here), just don’t actually use it in production code. For a great tutorial on how the Flexible Box Layout rules work, check out Google developer Paul Irish’s write up on HTML5Rocks.

The Flexible Box layout Module isn’t the only tool the W3C is considering for improving the layout tools in CSS. There are two additional standards under consideration — Template Layout (based on Mozilla’s XUL syntax), and Grid Positioning. The three use different syntaxes to accomplish similar things, so it’s unlikely all three will end up official specs. Currently the Flexible Box Module and the Template Layout Module are the more actively developed of the three.

For a great overview of how each of these three modules work, check out the video below of web developer Peter Gasston’s recent talk at the London Web Standards meeting. Gasston calls the talk How We’ll Lay Out Websites In 2016, but we’re optimistic that these tools will be available in most browsers much sooner than that.

[Update: You can also check out the slides from Gasston's talk over on SlideShare.]

Of course there’s an elephant in the room — Internet Explorer, which does not currently support any of these tools (some of the Flexible Box Layout tools turned up in an early preview release of IE9, but they appear to have been removed in the latest preview). But there’s some good news, particularly in the case of the Flexible Box Layout module, which already has a JavaScript polyfill for older browsers.

Cool as the Flexible Box Layout Module is, it’ll still be some time before you can use these new rules in production. Floats, absolute positioning and other awkward layout tools will be with us for some time to come, but at least the promise of something better is starting to appear on the horizon.