Documenting the Future: CSS Regions

Web Platform Docs is an ambitious project. It is challenging enough to document all the features that work across browsers today, without delving into experimental features. But it's also critical for web developers to learn what's coming up next. Such features are not as widely documented elsewhere, and getting early feedback on them helps make sure they are done right.

So when an important CSS layout feature like CSS Regions gets experimental support from two major browser engines, WebKit (Chrome and Safari) and Trident (Internet Explorer), we felt it was important to document it on Web Platform Docs. (You will have to enable experimental features to see how CSS Regions works.) CSS Regions helps solve a long-standing fundamental design problem: allowing content to flow smoothly from one layout element to another without forcing a position. With CSS Regions, you can create complex magazine-style designs in which content flows through freely positioned layout elements.

Mike Sierra wrote up a tutorial that shows how flows work, how to arrange a layout, enable it, control region breaks, style fragments, trim content, and create adaptive layouts with media queries. The new API starts with the css-regions package, and includes APIs, such as CSSRegionStyleRule, NamedFlow, and Region. New CSS property pages have also been added, such as flow-from, flow-into, region-fragment, and the @region rule.

Mike also posted an example he describes here:

http://letmespellitoutforyou.com/samples/region_mq_sample.html

Resize the window to see the simplified mobile layout the tutorial describes.