CSS Regions

pouring content into containers

CSS Regions allow content to flow between elements on a page. You can have a magazine style layout with columns. You can create inserts into content at defined points. You can do any crazy disconnected (or not) layout that you can dream up and make content wind its way through it.

It’s like pouring water into a vase. The water is content. The vase is a container. The water has the “flow-into” set. The vase has the “flow-from” set. The flow name itself connects the two together (it doesn't fit the analogy so well). It’s how we know that this particular water is going to be poured into this particular vase.

The flow is something you won’t see in your HTML. Nor will you see it defined in your CSS. You will however see it referenced in your CSS. Referencing it brings it to life. It’s magical.

Below is a small snippet to help you visualize the CSS involved. In this case, an article element would contain the original content as it exists in the HTML. The regions would be the target for that content as it will exist in the rendered page. It will happily flow through as many regions as you give it, in the order that it appears in the HTML. The article would be the text, and the regions would be the columns, in a magazine example.

article { flow-into: article-flow; } .region { flow-from: article-flow; }

I’ll leave you with some material to pour through. Here’s a great live example with a bit of fancy transformation on the second region (container) using a polyfill. Another example comes right from the horse’s mouth (the w3c standardization body), of inserting some content that interrupts some other content (see Example 2). The Web Platform folks over at Adobe had an article that got me started on this little tangent. It provides a polyfill (fancy word for code that provides support for something that the browser doesn't provide itself). Support for CSS Regions is currently extremely sparse, with even Chrome not dipping their toe in yet. Hence the need for a polyfill.