CSS Regions and Edge Tooling

Today, our web platform team released a very cool article on CSS Regions and Edge Reflow. CSS Regions, if you don't know, is a specification that Adobe and others have been working on now for nearly two years. Even better, iOS 7 landed support for this last week when it was released.

While I encourage you to actually read the spec (seriously, reading specs may not be exciting, but the level of detail is incredible), I'll do my best to explain the feature here. In a nutshell, CSS regions allow you to define how text should flow within a "region." You can think of a region as columns in a newspaper that flow naturally around pictures.

As I said above, regions have landed in iOS7, and they are available now via a flag in Chrome. You can see more detailed information about the support level at the CanIUse page:

Both Edge Reflow and Edge Code now have support for CSS Regions. In order to see this in Edge Reflow, be sure you update first (duh), but then check the View menu for "Shiny Web Features":

You can read more about Edge Reflow's update here: Shiny Web Features.

I also strongly recommend you check out Terry Ryan's article: Reflow Gets Support for Regions. His screen shots are particularly good, I think, at illustrating the feature. I also like Alan Greenblatt's excellent article on it: Cross-Browser Responsive Content with CSS Regions.

As a reminder - you can download Edge Reflow for free when you sign up at the free level of the Creative Cloud. If you have any questions about Reflow, or Regions, just let me know!