CSS Regions: Coming Soon to a Webpage Near You
It’s been just over a year since Adobe first announced its CSS Regions proposal for flowing text around and into irregular shapes. Since then, as the CSS Regions proposal has worked its way through the W3C standardization process it’s been simplified somewhat and brought into line with other, similar proposals.
Adobe’s web platform blog recently posted an overview of what’s changed in the last year and where the CSS Regions proposal stands today.
The short — and disappointing — answer is that CSS Regions is still not ready for prime time. Browser support is limited and even where it exists the spec is still a moving target and will likely change before it’s finalized. In other words, it’s still too soon to use CSS Regions in production.
That said, if you’d like to experiment with CSS Regions, Chrome 17+, the latest Safari nightly builds and Internet Explorer 10 all support the current draft version.
The best way to understand what CSS Regions are and how they will (hopefully) one day change the way we lay out content on the web is to see them in action. Google Chrome developer Paul Irish demonstrated CSS Regions during a SXSW lightning talk earlier this month (note that if you’re using the YouTube HTML5 video player you’ll need to manually skip to the 1:50:00 mark or follow the link to YouTube):
As part of the standardization process the CSS Regions proposal now specifically refers to a set of rules to control how text flows across defined regions. The canonical example being the sort of multi-column text layout — complete with column-spanning images — such as you might find in a print magazine.
In addition to Regions there are two other related proposals to handle different layout situations. The CSS Exclusions proposal describes how to flow content around shapes (as in the example at the top of this post) or into shapes, such as text inside a pie chart. The third piece in the Regions layout puzzle is the CSS Fragmentation proposal which defines how content breaks across columns and other regions.
It’s worth noting that Regions are just one of several proper layout tools coming soon. There’s also the CSS Multi-column Layout Module (which is surprisingly well supported in browsers), the Flexible Box Layout Module, the Grid Layout proposal and the Paged Media proposal, which we’ve covered in depth before.
With the exception of the Multi-column Layout Module which works in Firefox 2+, Opera 11.1+, Safari 3.1+, Chrome 4+ and IE 10+, none of the proposals are ready for production use. And even Multi-column isn’t going to work in current versions of IE, so it’s best limited to personal sites and experiments. But as with all things new and shiny, it’s in this experimental stage that we’ll start to see what sort of exciting new possibilities these layout tools will inspire. Webmonkey is starting to catalog these early efforts, so if you’ve built something that uses CSS Regions be sure to let me know in the comments below.