Skip to main content

Content flow in CSS3 regions

Today I was reading about CSS3 and I stumbled upon CSS3 regions. I was completely flabbergasted with what I saw and learnt today. Imagine that you’re trying to build a website for a magazine containing multiple columns (say 3). It would be arduous to fix the textual content on a particular column and then move the rest of the text to other columns. Now with Content Flow mechanism, the extra content can be moved to other columns in the layout with ease. There are just a couple of properties that you need to define in the styling sheet and you’re done. But this is not it. When you resize the browser window, the content automatically flows to other regions depending on the browser size.
Consider this web page layout containing 3 columns. For the purpose of this example, I have copied the text from my blog’s ‘About Me’ page and have increased the font to describe the flow.
content_flow_css3_regions
As you can see, the text is split across 3 columns in the page. When you try to reduce size of the browser window, the text automatically moves to the next region and when you increase the size the text flows back to the previous region.
There are couple of properties that you need to set for this content flow mechanism to work. Here’s the code:

body { height: 100%; width: 100%; margin: 20px; overflow: hidden; line-height: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; } /* source data available under a div with id - 'column_source' -webkit-flow-into: main-region instructs the browser to move the content to another region. 'main-region' is used as an identifier. */ #column_source { -webkit-flow-into: main-region; text-align:justify; } /* -webkit-flow-from: main-region instructs the browser to get the content from 'main-region'. */ .region { -webkit-flow-from: main-region; border: solid 1px; padding: 10px; margin-right: 30px; } #wrapper_regions { position: relative; padding: 25px; } #region1 { width: 20%; height: 50%; float:left; } #region2 { width: 20%; height: 20%; float: left; } #region3 { width: 30%; height: 70% }

As you can see from the above code, the source div has a property '-webkit-flow-into: main-region' and the region class has the property '-webkit-flow-from: main-region'. Here 'main-region' is used as an identifier to move the content from the source div to the various regions. Here's the HTML code:

<body> Resize the browser window. <!-- source region --> <div id="column_source"> <p>My name is Sagar Ganatra and I'm from Bangalore, India. I'm currently employed with Adobe India and I work there as a ColdFusion Engineer. At Adobe, I have worked on various features of ColdFusion and ColdFusion Builder. I'm very much passionate of web technologies and have a very good understanding of jQuery, Flex, HTML5, Java and of course ColdFusion. Apart from work, whenever I find time I indulge myself in reading books, cooking, swimming and blogging. This blog is dedicated to my views and ideas on the technologies that I work on, I also blog about my views on everything else that crosses my mind and on those light moments at sagarg.posterous.com</p> </div> <!-- regions where the above content would be displayed --> <div id="wrapper_regions"> <div id="region1" class="region"></div> <div id="region2" class="region"></div> <div id="region3" class="region"></div> </div> </body>

In the above code, three regions have been defined that would contain the data from the source div. Once '#region1' is filled up with the text, the remaining text content will be passed to the next region '#region2'. And whenever an attempt is made to resize the window, the source data would fill up the regions in the order that they are defined in the page.

As you might have figured it out, this works only on webkit browsers and fails on other.

Click on the demo button to see how this works. Resize the window and observe the behavior.

Comments

  1. Can you flow into and activate as the screen grows smaller? 

    ReplyDelete
  2. If I understand you right, if the screen is resized by reducing width\height then the content should flow from one div to the other. This is possible. If you try the demo on Chrome and when you reduce the size of the window, you'll see that content would flow from one div to the other.

    ReplyDelete
  3. why are using 
    -webkit-flow-into and not
    flow-into?

    ReplyDelete
  4. This feature is not available on all browsers, currently chrome supports it but it has added the -webkit prefix for the property 'flow-into'. I think once this feature is implemented by all browsers, using a property without prefix would make sense. So meanwhile, one has to use -webkit prefix while defining the property.

    ReplyDelete

Post a Comment

Popular posts from this blog

Custom validation messages for HTML5 Input elements using the constraint validation API

HTML5 has introduced several input types such as EMAIL, URL, RANGE, SEARCH, DATE, TIME, etc,. Most of the modern browsers have implemented them and are ready to be used in a HTML document. Another exciting feature introduced in HTML5 is the form validation. Instead of writing JavaScript to validate users input, browsers can now validate it and show an appropriate message if the validation fails. The validation message is shown in line with the field for which the validation has failed. The default error message is shown when the validation fails. In this post I'll explain how these error messages can be changed.

De-obfuscating javascript code in Chrome Developer Tools

I had blogged about JavaScript debugging with Chrome Developer Tools some time back, wherein I have explained how these developer tools can help in debugging javascript code. Today Google Chrome 12 was released and my Chrome browser was updated to this version. As with every release, there have been some improvements made on performance, usability etc,. One feature that stood out for me is the ability to De-obfuscate the javascript code.

What is Minification?

Minification is the process of removing unnecessary characters such as white spaces, comments, new lines from the source code. These otherwise would be added to make the code more readable. Minifying the source code helps in reducing the file size and thereby reducing the time taken to download the file. This is the reason why most of the popular javascript libraries such as jQuery are minified. A minified jQuery file is of 31 KB in size where as an uncompressed one is about 229 KB. Unfortunately, debugging minified javascript file…

Adding beforeRender and afterRender functions to a Backbone View

I was working on a Backbone application that updated the DOM when a response was received from the server. In a Backbone View, the initialize method would perform some operations and then call the render method to update the view. This worked fine, however there was scenario where in I wanted to perform some tasks before and after rendering the view. This can be considered as firing an event before and after the function had completed its execution. I found a very simple way to do this with Underscore's wrap method.