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

Cross-Browser Responsive Content with CSS Regions

In a recent post I described how you could use CSS Regions to easily create responsive content. One of the limitations mentioned though was that CSS Regions at present are natively supported only on Webkit nightly and Chrome Canary and Chrome Stable.

There is however the CSS Regions polyfill code up on GitHub to consider. I looked at that last year and it was a bit slow and problematic at the time.  It turns out though that there have been several improvements to the code in the interim and it works quite nicely and is quite performant now.  Let’s take a look…

Check out this Pen!

You can’t see it when the Codpen has been embedded in this post, but I’ve included cssregions.min.js in the JS tab.

Take a look at the CSS Tab.  Notice the new -adobe-flow-into and -adobe-flow-from CSS attributes:

#source {
  -adobe-flow-into: main-thread;
  -webkit-flow-into: main-thread;
  flow-into: main-thread;
}

.region {
  -adobe-flow-from: main-thread; 
  -webkit-fow-from: main-thread;
  flow-from: main-thread;
}

These new attributes are recognized by the polyfill.  They work the same as the -webkit-flow-into/from and flow-into/from attributes.  The polyfill code will detect and use any native implementations that exist so you don’t have to do anything special.  Everything should work exactly as it did before on WebKit and Chrome, but now it will also work on iOS4+, Android 4+, Firefox, Safari 5+, and Opera.   That’s right, mobile too!

Go ahead and view this post with the other browsers and devices listed above. The Codepen demo should work just fine (let me know if it doesn’t!).

Enjoy!

 

Responsive Content Using CSS Regions

CSS Regions allow content to flow across multiple areas of the display, called regions.  The beauty of CSS Regions is that you can separate the content from the layout.  And with that comes the ability to create some responsive content very easily.

Update August 29, 2013: 

I have a new post describing Cross-Browser Responsive Content Using CSS Regions.  I describe there how you can do exactly what is described here, but also use the CSS Regions polyfill to get CSS Regions support on many other browser and devices.

Continue reading