Designing and Debugging Web Layouts With CSS Regions

The adoption of CSS Regions is definitely moving along swiftly.  They are now supported in Mobile Safari on iOS7, Opera, Chrome Canary, Chrome Stable & WebKit nightly. Browser support continues to evolve and can be tracked here.

CSS Regions allow you to define content that can “flow” through a series of defined regions on the page, so you can create magazine-type layouts and responsive websites through simple CSS.  I wrote about how you can use CSS Regions for creating responsive content in an earlier article.  I’d definitely recommend reading that before continuing here if you haven’t already done so.  It should give you a good basic understanding of how CSS Regions work.

Defining one piece of HTML markup as the source for another piece of markup is an extremely powerful, but very different way of thinking about Web page layout. You’re very likely going to want good authoring tools, and the ability to debug in-browser to figure what’s going on when your site behaves unexpectedly.

What we’ll describe here are some options for authoring and debugging Web layouts that use CSS Regions.

Continue reading