Understanding CSS Regions

Some of my favorite parts of CSS3 are those concerning layout. So far I’ve explored Flexbox and Columns, but today I’m going to dig into CSS Regions.

What the Heck are They?

Understanding CSS regions is pretty simple really. Basically, they allow us to flow content through multiple containers on a page.

Usually we are stuck with one containing element around our content like a <p> or a <div> or something similar. This wouldn’t work if we are trying to achieve a layout similar to this:

To create a layout like the design above without css regions we would have to use JavaScript or something to let the content regions know how to handle the content. With CSS Regions we simply let the containers know what’s up and they handle the rest of the heavy lifting.

Ok Cool, So How Do We Use it?

CSS Regions consist of only 2 properties and are easy to use. It doesn’t have to be text only, many other HTML elements can be part of the flowed content.

flow-into

This property identifies the container as a “CSS Region” element. It accepts an arbitrary value that you create. It then uses that value to determine the link between this container and its additional flow containers.

flow-into — accepts an arbitrary value that you create

none — disables the container as a “region”

flow-from

This property identifies the container as a “CSS Region” element. It accepts an arbitrary value that you create but it must match that of another container with flow-into set. It then uses that value to retrieve the content.

flow-from — accepts an arbitrary value that you create

none — disables the container as a “region”

Got an Example?

Well of course I do. The only problem is that, at the time of writing, the CSS Region spec is still a working draft. This means browser support is all over the place. It doesn’t work in Firefox or Opera, ie10 must use an iframe tag, Chrome needs “enable-experimental-webkit-features” enabled, and Safari needs the “-webkit” prefix. So, unfortunately all of the browsers that I have available do not yet support this feature and it’s likely that yours don’t either. Sorry, it’s just the times we’re living in. I do, however, have an example of the code so that you can get an idea of how you would use it.

Browsers That Don’t Support CSS Regions

If you would like to start using CSS Regions today you can do so using a polyfill provided by Adobe. You simply include the JavaScript file in your site and the use an “-adobe-” prefix. If your browser supports CSS Regions the polyfill won’t run so you’ll need to make sure to include the un-prefixed version as well.

Browser Support

Browser support is nearly non-existent so far so it will probably be a little while before we can take advantage of CSS Regions.