CSS Regions

CSS regions allows content to flow through multiple elements. It allows you to modify the standard flow of content, allowing you to customize how content is grouped and displayed. I won't really go into much detail on the basics of CSS regions, so if you are interested to read more about them, you can check out the spec or article at Adobe.

Getting the option to split a single content item into multiple items opens a lot of new different things you can do and I'm not talking about the type of stuff illustrated in the Adobe examples. For images, this has been possible for a long time with the use of background-position and for example commonly used with sprites. However, for other type of content like normal HTML, you haven't been able to split the content into multiple items, without actually cloning the original content or splitting the actual content.

Just vertical cropping?

By default, the content is broken up as it leaves the vertical space allocated to it. If a region has a height of 100px and the content has a height of 120px, 20px of that content will flow into the next region. Like wise, if each region has a height of 20px, the content will be split among 6 regions.

It certainly would be nice to have a clean way to select whether the content should be clipped vertically or horizontally. However, we can rotate the content in 90 degrees and then wrap it inside another element, which is used as the flow-from element which allows us to do cropping at different angles.

So we can either do the cropping vertically or horizontally, but what about both at the same time? Sure, you can do either the horizontal or vertical cropping first, flow those items into new elements which are rotated 90 degrees, and then perform another from-from into a final container.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Vertical cropping

By default, the content flows from one region to another vertically.

Multiple splitting

Once the second set of splits has been done, the content can be rotated back to its original rotation and can be used with flow-into. The items will still need to be gathered in the right order, but through CSS the actual elements can be positioned whatever way necessary.

These examples just illustrate how to do square/rectangle crops, but by varying the rotation angle, any shape can be cropped out. Do note that in those cases it may become necessary to clone the content, which is relatively easy to do with the use of CSS reflections, and although it is a bit tricky, the method should be pretty self explanatory.

There property wrap-shape could also be used to further modify how the content is displayed, and shape it into a specific polygon shape.

So now what?

Well I didn't spend much more than a couple of hours and I found a number of interesting things you can do with this method. Unfortunately, the webkit implementation of CSS regions still has a lot of bugs (from which some should be evident in the examples), but here are a few things that I threw up and are somewhat working:

Content clipping
Bending content
Bending content (animated)
Depth of field (requires CSS filters, Chrome 19?)

As webkit is as of writing this the only one with regions enabled in stable builds, all the examples are limited to the webkit implementation of CSS regions.

Final thoughts

Once @region becomes available and has better support for the planned properties it should support, there are tons of new stuff you could do with CSS that has previously required you to use JS. Among other things, collision detection through some media-query-iframe-hackery would be possible, but I personally would love to see animations become available among the supported properties for @region. In fact, it is perhaps the biggest dissapointment I had with regions and the @region rule, when I noticed how limited the supported properties list was.

Bugs and more bugs

Another issue I had and which will become evident when playing around with CSS regions or checking the examples I've created, is that there are a lot of bugs still present in the webkit implementation. By a lot, I mean that in most cases I would rather expect it not to work than to actual work without flaws. Apart from just some drawing issues, there are a lot of times you'll just end up with the "Oh snap" crash page (by just using some CSS).

In addition to just the increased exposure to clickjacking (you can basically redress a complete form or whole page now without the user having a clue), there are a number of security concerns that became evident when playing around with the regions. In conclusion, although I love that browsers, especially webkit and Chrome are pushing a lot of new stuff for us to play with, I'm surprised that Chrome doesn't have CSS regions still behind a flag.

As a final note, these examples illustrate different things you can do, but on a more practical level perhaps shouldn't. Please feel free to leave comments or questions at @niklasvh or at Google+.