Flexbox syntax for IE 10

Posted by & filed under Articles.

Yesterday in my presentation on CSS3 Layout I talked about the different syntaxes that the Flexible Box Layout module (Flexbox) has gone through on its journey to candidate recommendation. As I said in my talk, IE 10 didn’t have time to update to the new syntax before it came out last fall, so it uses the syntax that first came out in 2011, with the -ms- prefix tacked on.

Fortunately, Flexbox basically works the same way between IE 10 and the current syntax; it just uses some different property and value names. To help you keep track of the differences, I quickly created this table today comparing the current, standard-to-be syntax with the 2011 syntax that IE uses. This is not meant to be some comprehensive, precise reference, just a quick and dirty cheat sheet, but hopefully it will be useful to you (and me) someday. (more…)

CSS3 Layout presentation at In Control Orlando

Posted by & filed under Articles.

Today I spoke at In Control in Orlando on CSS3 Layout. For a decade we’ve been using floats for creating CSS layouts, and while they’re still the best choice for creating most multi-column designs, we’ve all been frustrated by their quirks and limitations. So in this presentation, I talked about some of the new and exciting CSS layout techniques that are either working right now, right around the corner, or a little ways down the road. I focused on how Grid Layout and Flexible Box Layout (aka Flexbox) will be able to be used in the future to create layouts, but also how to use Flexbox in practical ways as a progressive enhancement technique for the layouts you’re crafting today.

You can view the slides on SlideShare, or download the slides here:

CSS3 Layout (PDF, 2 mb)

CSS3 Layout Demos

I showed a few examples of how to use Grid Layout and Flexible Box Layout and wanted to share my demo files with you so you could poke around in the code  if you like. The last two demos have fallback CSS in place so that they still look fine in other browsers; it was not part of my presentation to do that with the first two demos.

(more…)