Revive your responsive web design with CSS Region

November 20, 2013
admin

Creative people love to play with new techniques. Doing experiment with a new method is not a bad sign. Is it? Anyway, CSS Region has come up with some new advantages, which is used for responsive web designs. It makes easy to build layouts without having any JavaScript. Regions are totally a new part of the CSS specifications. So it does not have support in all type of browsers yet.

It supports in iOS7, Safari 6.1+, and Safari 7. Here you can find some tips for applying the method in different browsers.

Google Trend (see screenshot below) shows that search for the word ‘CSS Regions’ jumped up especially in this month.

Google Trend of CSS Regions

Recently, the use of CSS Regions has increased!

How it works?

You can separate content across multiple containing elements. It creates a flow consists of content that may appear within multiple elements. Also, a region chain, which is the collection of elements the flow is spread across. Once if you have defined the elements, the flow will fill the elements dynamically in the region chain. You can then size the containers vertically. Here, you will get the new opportunity to do not worry about the content getting cut off. It will simply overflow into next element in the chain.

You need to start by creating a named flow to use regions. Add the CSS property flow-into to the content element, with the value of your flow’s name. Then, apply the CSS property flow-from with the value of your flow’s name for each region through which you want the content to flow. The content element will flow through the region elements. Current implementations in browsers require the property to be prefixed, but we are using the un-prefixed version here.

#myContent {
flow-into: myNamedFlow;
}
.myRegion {
flow-from: myNamedFlow;
}

A content element and the scaffold of all of the regions would be containing by your HTML that this content will flow through. The content element will not be shown in its original location when you work on regions. Also, any HTML already in your region elements will be disappeared and it will be replaced by the content being flowed into them. For this reason, we can have placeholder or alternative content within our region elements.

<div class="myRegion"></div>
<div class="myRegion"></div>
<div class="myRegion"></div>

<div id="myContent">...</div>

The content being flowed is not a child of the region elements. Only changing where the content is displayed. According to the DOM, everything remains the same, so the content does not inherit styles from the region in which it lives. Instead, the specification defines a CSS pseudo-selector, ::region(), which allows you to style the content within a region. Apply the pseudo-element to the region’s selector and then pass a selector as an argument, specifying the elements that will be styled within a particular region.

.myRegion::region(p){
/*styles for all the paragraphs flowing inside our regions*/
}

Break Properties

JavaScript events can be used to manage layouts to display content properly. The regionoversetchange event is dispatched when the property regionOverset changes for any region. When the page is stretched out the element of container no longer flows into certain regions. The value of regionOverset is either fit, overset fit, overset or empty. The value empty means there is no content inside the region. The regionOverset  is set to overset when the last region in the chain is unable to display all of the remaining content, which makes some of the content unreadable.

Debugging

CSS Regions2

To fit the content within the region properly use the fit value. It will fit either completely (if earlier in the chain) or partially (if the last region of the chain). These events will respond depending upon the content, design and the layout. To change layout apply classes. These classes will be applied to add or remove regions dynamically. For more detail use Christian Cantrell’s article “Web Inspector Support for CSS Regions“.

Region has opened up many opportunities in the field of responsive web design for all kind of platform and devices. Adobe’s demo for a bike company, created with Edge Reflow. Follow @adobeweb for the latest updates on regions and other new Web features. Also, be sure to check out Adobe’s CodePen collection, which shows regions in use; you may want to fork one or more of the examples to explore different ways to use regions.

3 Comments. Leave new

drag racing games
February 24, 2014 4:53 am

peoples like enough articles like you really have an idea what they think what they want and what they like so thats whey you wrote that beautiful article, thanks.

Reply
duncan93.blogsforexpats.com/2014/02/21/mark-stuart-womens-jersey/
February 24, 2014 7:16 am

An awesome post. Thanks a lot!

Reply

[…] Revive Your Responsive Web Design with CSS Region […]

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.