Experimenting With CSS3 Multi-Column Layout

2011-09-25T11:44:00-04:00

This week I was working on a prototype layout for one of our internal tools and I decided to try out the CSS3 multi-column layout module.

Currently only Mozilla and Webkit support multi-column styles, but since this is an internal tool I have a greater degree of fredom in adopting graceful degradation and progressive enhancement.

What I found out is that Firefox and Webkit have implementes the ambiguous parts of the standard very differently, resulting in some weird behaviour. A simple 4 column layout results in inconsistent UIs depending on your browser of choice.

Firefox

Mozilla’s implementation seems to have no quirks and results in a layout exactly as I’d expect:

The columns line up at the top and bottom
The bottom padding is consistent
Blocks with # of elements < # of columns layout properly.

Safari

Safari’s implementation is not quite there as the spacing seems to vary widly:

The columns routinely don’t line-up
The bottom padding is never consistent
- Affected by padding being split across columns
Blocks with # of elements < # of columns don’t show up in the proper columns
- If only one element is present is shows up in the second column
- Two elements show up in column 1 & 3

Chrome

Chrome, which uses the same Webkit engine as Safari, has even worse results. I suspect they’re using an older version of Webkit:

Given that this is Webkit it exibits many of the same behaviours as Safari, with one exception:

Sometimes results in elements being rendered above the column border

Conclusion

CSS3 multi-column layout is not consistent enough between Firefox and Webkit-based browsers to make the cut for graceful degradation. If your design calls for multiple columns you’re better off using a CSS framework like:

Technicalworx 2.0: Now With Octopress

2011-09-24T20:52:00-04:00

It’s been quite a while since this blog was last updated, so I’ve decided to start fresh and with a new focus.

When I first registered this domain on July 2002, I was still a university student and this was a means to communicate with my friends. Those were the days before Facebook, Twitter, and Google+ when blogging was social media. Over the past few years, as my interactions with friends moved elsewhere, this site has become stagnant and in need of a makeover.

With that in mind I decided it was time to completely ditch the previous incarnation. I’ve done away with all the old content, the old MovableType setup, and all the custom PHP.

Inspired by Matt Gemmell’s move to Octopress, I decided it was time to “bake” this site and move to a more flexible, more techy friendly system:

Octopress for publishing static HTML
Disqus for comments
Markdown for post formatting
POW for previewing posts
git for source control
Built-in integration with Twitter, Google+, and Google Analytics

This means that Technicalworx is now completely portable and can be moved in a matter of minutes. All I need is a simple web server!

Expect the design of the site to receive a few tweaks over the next few weeks, as we’re currently running with the default Octopress theme. For now enjoy the HTML5 template and mobile friend responsible layout.