2009/02/24

ADC - CSS Recipes for WebKit

Safari 4 Beta has some nice features. Some have apparently been around since Safari 3, but I didn't notice. For example:

ADC — CSS Recipes for WebKit:

"Getting columns right on webpages using pure CSS instead of HTML tables has always been tricky. Since the CSS3 properties for multi-column layout are implemented in Safari and WebKit, you can clearly define the number of columns [and] the gap between the columns...

This code defines that the HTML in the columns div tag should be presented in three columns. Each paragraph is its own column."


Wow, that's nice! It means you can define a fluid multi-column layout and have content flow between those columns.
safari_4_columns_1.png

Granted, the layout can do some strange things when images bleed across columns.
safari_4_columns_2.png

Maybe one of the -webkit-column-break-* properties can control this.

[Update: Of course Firefox 3 supports most of these column properties as well, via -moz-column-*. Firefox 3.1 beta 2 extends support to properties such as -moz-column-rule.]

No comments: