#CSS Regions

##What is it?

With regions, you can use CSS properties to flow content into existing styled containers, regardless of their dimension or position on the page. Using regions, you can create visually appealing responsive layouts both for mobile and desktop content as shown in the “Orphaned Elephants” demo below.

The Adobe Web Platform team is contributing to the CSS Regions Module Level 1 specification as well as the implementation in WebKit.

##When can I use it?

Now in Safari on both OS X and iOS and also in Internet Explorer on Windows.

For a view of current and upcoming browser support, check out caniuse.com.

Learn how to enable this feature in popular browsers or you can use Francois Remy’s CSS Regions polyfill in unsupported browsers.

##Where can I learn more?

CJ Gammon’s article Killer Responsive Layouts With CSS Regions provides a nice overview of CSS Regions concepts. In her article CSS Regions Matter, Sara Soueidan notices that CSS Regions are a fragmentation feature rather than a layout feature and from this perspective analyses some interesting use cases for them.

Our samples of regions on CodePen are there to help you understand the basic CSS Regions concepts. For more advanced usage of CSS Regions, you can take a look at some of the samples put together by the Adobe Web Platform team: National Geographic Forest Giant, Food Network Cupcakes and Adaptive WebApp UI.

During a CSS regions pattern rodeo hosted by CodePen, Tyler Fry and Joshua Hibbert created some awesome regions demos. Tyler Fry won the contest with his reading carousel made out of regions and transforms, and Joshua Hibbert created an exploding book featuring a nice hover effect when opening the book.

We’ll be sharing more information and updates from our blog and Twitter account.