Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using CSS Regions as an Enhancement

DZone's Guide to

Using CSS Regions as an Enhancement

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

If you were not aware of them CSS Regions are proposal to CSS3 that would allow for some magazine like layouts in HTML pages. Adobe has been leading the charge on getting them into WebKit.  They are currently available in Chrome. (Also I think IE10)

Now the way they work:

  • You create a bit of content in an element like an article
  • You designate that article as the source of a "flow"
  • You designate other elements as the recipients of the "flow" (We'll call them "regions")

Then when the browser renders the content

  • The element designated as the "flow" is not shown
  • The content of the "flow" pours into the "regions"

Assuming this HTML:

<article id="content">
     ... Content here ....
</article>

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

And this CSS:

#content {
	-webkit-flow: 'foo';
	-webkit-flow-into: foo;
}

.region {
	background-color: white;
	-webkit-box-sizing: border-box;
	content: -webkit-from-flow('foo');
	-webkit-flow-from: foo;
	margin: 20px 0 20px 0;
	height: auto;
	overflow: hidden;
	padding: 10px 10px 10px 0;
	width: 48%;
	float: left;
}

#region1{
	float: none;
	width: 100%;
	height: 240px;
	margin-top: 0;
}

#region2{
	height: 500px;
	float: right;
	margin-left: 0;
}

#region3{
	height: 500px;
	margin-right: 0;
}

#region4{
	float: none;
	width: 100%;
	height: 2000px;
	overflow: visible;
	margin-bottom: 0px;
}

You get something like this:

I have a demo. It only works in Chrome.  Resize the screen to see the flowing of the content.

I was presenting on them the other night and I got asked a pretty good question.

Have you thought about how these degrade?

I made a bad joke, then mumbled something about if the browser doesn't support CSS Regions then the original "flow" element gets displayed and all is well.

I tested it today. And all is not well. Because I still created those region elements. And they show up down at the bottom and add whitespace.

Check out the demo on any browser bu Chrome and you'll see what I'm talking about all the way at the bottom.

So after some experimentation I decided that the best way to handle this was to create my four regions with CSS exactly how I had but only inject the region holders if the browser supports regions, like so:

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
	if (document.webkitGetFlowByName){
		var displayText = '<div id="region1" class="region"></div>'+ 
		'<hr />'+ 
		'<div id="region3" class="region"></div>'+ 
		'<div id="region2" class="region"></div>'+ 
		'<hr />'+ 
		'<div id="region4" class="region"></div>';

		var displayDiv = document.createElement('div');	
		displayDiv.innerHTML = displayText;
		document.querySelector('body').appendChild(displayDiv);
	}
});
</script>

Here's a demo of the improved version.

In this case, I get a much better experience for non Chrome users--no weird mile of whitespace at the bottom of the content.

 

 

 

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}