Web

A Beginner’s Guide to CSS Regions

    Kerry Butters
    Share

    It’s an exciting time to be a designer, especially if you’re the creative type and love to experiment with new techniques. While CSS Regions is still a work in progress, especially since it’s still not supported by all browsers, it’s a powerful layout tool that is worth taking a look at and having a play around with.

    Regions allows you to use CSS properties to flow content into containers and is ideal for web magazine sites and others that require dynamic text. It can be used to create responsive layouts, perfect for today’s modern web on a variety of devices.

    First up, a quick look at browser support and enabling Regions. For a full list of supported browsers, see Adobe’s support matrix. In Safari iOS7, Regions are automatically enabled and they are unsupported in Firefox for the time being.

    In Chrome

    1. Open a new tab
    2. Type chrome://flags in the location bar
    3. Press CTRL+F to open a find box and type in “experimental WebKit features” and hit enter
    4. Click on Enable > Relaunch Now (at the bottom of the page)

    For a look at what Regions can do, try the Human Legacy page by Christian Cantrell, using the left/right arrow keys to scroll through pages and the ESC key to highlight the different containers. This is a great example, as it shows off the power of Regions and if you view in Firefox too, you will immediately notice the difference.

    Quick browser checklist:

    • IE10+ works but requires content to come from an iframe
    • Firefox doesn’t work at all as yet
    • Safari 6.1 works using -webkit- prefix
    • Chrome works using instructions above
    • Opera will work if you’re running a webkit-based version with the -webkit prefix

    For a slightly less impressive example, but one with images, take a look at Adobe’s Road Trip. You can also see the W3 Editor’s Working Draft for the latest, most up to date details.

    What’s the Point?

    The transition from print to web is slowly taking place and this means that publishers have to find new ways to display written content on the web in such a way that has proved tried and tested in print. This has led to Adobe looking at new ways that publishers can create complex layouts so that more sophisticated layouts can somewhat mimic print.

    The extensions that have been proposed for Regions can be divided into four categories, which are:

    • Threading content – content that flows from one area into another
    • Arbitrarily shaped containers – text in non-rectangular areas
    • Arbitrarily shaped exclusions – wrap around text for shapes
    • Region styling – style of content dependent on which area it flows into

    How Do Regions Work?

    Usually, text on a web page can be displayed in various regions, but it is always independent of other text on the page. This can lead to display problems when the site is viewed on different sized devices, which makes it more difficult for the user to navigate, often having to use gestures in order to view text.

    Using Regions allows you to flow text across different areas of the page into containers using the flow-into and flow-from CSS properties. Note that you’re encouraged to keep semantic content elements separate from presentational ones in which they appear. Once you have added flow-into the content area disappears from view and won’t reappear until the flow-from element is applied.

    Defining regions in this way doesn’t affect the underlying content of DOM elements and content flows through the regions logically so you can’t shuffle regions about, they have to be sequential, ie: Region #1, Region #2 and so on. However Regions can be scattered and interrupted by the flow regions of others, but for the most part it’s necessary to rearrange them in the DOM tree in order to modify flow order.

    Regions work with the implementation of two simple concepts, the block of content where it can flow-from and a block to flow-into, as demonstrated by the following DOM structure.

    <div class="content">Lorem ipsum etc... your content goes here</div>
<div class="myregion" id="region1"></div>
<div class="myregion" id="region2"></div>
<div class="myregion" id="region3"></div>

    Then the CSS below turns myregion divs into regions; this is also where you control float and width restrictions in order for the lorem ipsum content to flow into three columns.

    .content {
  flow-into: yourcontent;
  -webkit-flow-into: yourcontent;
}

.myregion {
  flow-from: yourcontent;
  -webkit-flow-from: yourcontent;

  float: left;
  width: 100px;
}

    This example gives yourcontent as the name for that particular region, you can use different names for different regions to layout separate pieces of content. You can use more regions for numerous reasons, such as:

    • More columns
    • Positioning
    • Fluid layouts
    • Large regions below columns

    Of course you can also add styling elements to the CSS so that you can dictate the appearance of each region. You can also use exclusions and shapes in order to change the way that the text is displayed.

    In the earlier mentioned Human Legacy page for example, you’ll note that the middle section of the page uses a different shape and content to the rest of the containers.

    When styling containers, use the following CSS, altering color to suit:

    p { color: gray: } @region-style #region_1 { p { color: #0C3D5F; } }

    css regions
    (Source: https://www.w3.org/TR/2011/WD-css3-regions-20110609/#region-styling)

    As you can see from the example, styling can be used for individual paragraphs and words too, as well as exclusions and SVGs to create simple graphics that can radically alter the appearance on the page.

    While this is not an exhaustive introduction by any stretch of the imagination, it should set you firmly on the road to experimentation. You can also try using Adobe Edgeflow, which supports CSS regions and connects directly to Photoshop CC.

    Why Use Regions?

    Regions are perfect for publishers such as magazines, news sites, online articles or even eBooks looking forward. They are also useful for responsive layouts as the content re-flows as device orientation is changed and so on.

    With Book.js, a JavaScript library that’s currently experimental, you can even make web pages look like the pages of a book, as it uses regions itself.

    With tablet devices becoming the norm, regions can be used to make interesting layouts that mimic traditional print and could be just the thing that the publishing industry has been waiting for.

    So get out there and start experimenting to see what you can create with CSS Regions.