Using CSS Regions in Responsive Designs

By Brian Rinaldi

The CSS Regions specification allows you to create multiple containers into which content can flow into and out of. This can be especially useful for creating complex, magazine-like layouts with irregularly shaped content layers. Recently an article came out that has led many people to feel negatively about the CSS Regions spec. While, I am not endeavoring to get into a tit-for-tat about CSS Regions with the author, whose qualifications are far beyond my own, I did want to address one specific topic.

One of the subheadings of that article has lead people to believe that CSS Regions are not suitable for responsive designs. From some of the reactions, I suspect that many people didn’t delve into the details regarding the author’s complaints in this regard, which are very specific to the relative merits of CSS Regions over and above what can be done with CSS multi-column layouts. However, as I surveyed reactions it seemed that many readers seemed to just take it to mean that, as a whole, CSS Regions don’t work on responsive designs. While I am neither the foremost expert on responsive design nor CSS Regions, I did cover this topic in a recent article and this struck me as incorrect.

In this article I will cover a simple example of using CSS Regions within a basic responsive layout to show that they indeed can be used in responsive designs.

Some Background

If you are really curious about the specifics of the debate, I suggest you start by reading the full post on the A List Apart blog. I don’t intend to get into the details any further here.

The CSS Regions specification is, in large part, the work of colleagues of mine at Adobe within the Web Platform Team. I say this, in part, so that you can judge my bias however you choose though I am not arguing the merits of the spec in this article, just addressing what I think is some confusion. In addition, Adobe has integrated some initial tooling around CSS Regions in both the Brackets/Edge Code editors as well as the responsive design tool called Edge Reflow. Joan Lafferty, also of Adobe, wrote about using CSS Regions in Reflow in an earlier article on this site.

The inclusion of CSS Regions in Edge Reflow should probably already make you ask, “if CSS Regions doesn’t work for responsive designs, why is Adobe putting it into their responsive layout tool?” In fact, CJ Gammon, again from Adobe, wrote a great article covering how to create responsive layouts using CSS Regions for Smashing Magazine this past November. I highly recommend the article, as it goes into a good amount of detail, not all of which I will cover here.

Anyway, enough background, let’s build a simple responsive layout using CSS Regions.

A Simple Example

You can see my simple desktop, tablet and mobile layouts for “Robots Weekly” in the image below. The desktop is three columns, tablet is two and phone is one. Keep in mind that I am not a designer – so be gentle.

You can play with the example here. However, before you do, you’ll need to ensure that your browser has the feature enabled. Safari on OSX Mavericks supports CSS Regions. If you are on Chrome or Opera, you’ll need to do the following:

1. Type the URL with the flag keyword in your address bar.
   1. For Chrome, type: chrome://flags/#enable-experimental-web-platform-features
   2. For Opera, type:
      opera://flags/#enable-experimental-web-platform-features
2. Click the Enable link and restart the browser for the changes to take effect.

I should note that I have only tested my example on Chrome.

Basic Usage

The content and images beneath the banner are being displayed using CSS Regions. Let’s see how this is done.

All of the content has been defined in an <article> element that is at the bottom of the HTML page and is set to not display:

<article>

    <img id="image" src="img/robot1.jpg" class="image">

    <div class="subhead">
        <h3>Top Stories</h3>
        <blockquote>"Don't blame me. I'm an interpreter. I'm not supposed to know a power socket from a computer terminal." - C3PO</blockquote>
    </div>

    <p>In this issue we interview VX59 again - for the first time! It turns out that all prior interviews with him were conducted with an exact duplicate. Read the article to see if his answers stay the same (hint: they do).</p>

    <img id="image" src="img/robot2.jpg" class="image">

    <div class="subhead">
        <h3>Health</h3>
        <blockquote>"You gotta be pretty desperate to make it with a robot." - Homer Simpson</blockquote>
    </div>

    <p>Are your joints getting a little squeaky?RS439-A reveals the secrets she (or is it he? or it?) uses to keep looking and feeling right off the assembly line. Check out her new excercise and see how any reps you can complete without a recharge.</p>

   <img id="image" src="img/robot3.jpg" class="image">

    <div class="subhead">
        <h3>World Domination Update</h3>
        <blockquote>"Today, it's a Chinese-food-retrieval robot. Tomorrow, it travels back in time and kills Sarah Connor." - Sheldon Cooper</blockquote>
    </div>

    <p>Catch up on the latest news in our global quest for world domination against our human creators. See how the RT49's new "self-healing" architecture is being leveraged to create a nearly indestructible army of attack-bots.</p>

</article>

Within the body of the HTML I also have three <div> elements set up with a class called region (you don’t need to name your class this way, I simply did this for example purposes so that it is easy to see when looking at the stylesheet).

<div id="region1" class="region">
</div>
<div id="region2" class="region">
</div>
<div id="region3" class="region">
</div>

Within my stylesheet, I first need to flow the content from the <article> element into what is called a “named flow.” I have named mine article-content and it is created using the following CSS rule:

article {
   -webkit-flow-into: article-content;
    flow-into: article-content;
}

Now, I simply need to allow that content to “flow into” my region containers. Below is the class that defines them for the desktop version.

.region {
   -webkit-flow-from: article-content;
    flow-from: article-content;
   width: 30%;
   margin: 0 0 10px 2.5%;
   float: left;
   height: 550px;
}

Throughout all the layouts, I wanted the content to display nicely without breaking in the middle of paragraphs or without separating the heading title from the quote beneath it. To do this, I defined a rule using the region-break-inside property to tell the browser to avoid breaking within any of those elements. This way, as the page is resized, I can maintain some level of control as the content flows across the three regions.

article p, article img, article .subhead {
    -webkit-region-break-inside: avoid;
    region-break-inside: avoid;
}

Eliminating Regions in Responsive Layouts

As we resize the screen down to a “tablet size,” I simply wanted to eliminate one of the <div> elements that serve as a region container. This is pretty easy as CSS Regions will respect display: none and use the remaining elements to flow the content. In order to have the content not cut off inadvertently, I have set the second region container to height: auto and it will expand to fit the remaining content if necessary. (I should note that I chose 695px width because that is where the content broke not because it is a standard “tablet” breakpoint).

@media screen and (max-width:695px) {
    .region {
        width: 46%;
        margin-left: 3%;
    }

    #region1 {
        height: 750px;
    }

    #region2 {
        height: auto;
    }

    #region3 {
        display: none;
    }
}

For the “phone” version, I simply eliminate two of the three region <div> elements and flow everything into the first (Again, I chose to place the breakpoint where the content breaks).

@media screen and (max-width:482px) {    
    #region1 {
        width: 90%;
        min-height: inherit;
        height: auto;
        margin-top: 10px;
    }

    #region2 {
        display: none;
    }
}

That’s it. Pretty easy right? Obviously, in a more complex design (from someone who can actually design) you may have to play around with things a bit – but that’s par for the course with responsive layouts I think.

Complex Responsive Layouts with CSS Regions

Admittedly, my example was simple and a bit contrived but my goal was just to clear up any confusion people may have as to CSS Regions being unusable in responsive design. There’s actually a lot more fine-grained control than what I have shown that you can utilize if necessary. For example, there are JavaScript events that fire from region elements indicating a change in its display (for example, if a region element has no content). There are also a variety of other break properties and values which I have not shown. For those details, I’ll once again refer you to CJ Gammon’s article. I also suggest you toy with the CSS Regions support in Edge Reflow for a fun and easy way to see how you can utilize regions within responsive layouts.