Introduction to CSS Regions



With the advent of a large number of mobile devices, sites are becoming more “responsive”, this requires new, more convenient ways to display content. CSS Regions, the new Adobe web standard, will be able to help in this in the near future.

Simply put, CSSRegions are designed to smartly wrap text around objects. While this standard is not ready for use on live sites, but now you can experiment with the regions.

Browser support


Check if your browser supports CSS regions at caniuse.com . In Chrome, we include support as follows:

  1. We go into the experimental functions - chrome: // flags
  2. Find the item “Enable CSS regions” and enable it:

  3. Restart Chrome


One block of text in several columns ( demo )


This is the easiest example of using CSS regions - one block of text flows into three columns:
HTML is simple:

<p class="example-text">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>

<div class="regions"></div>
<div class="regions"></div>
<div class="regions"></div>


CSS is no more complicated:

.example-text {
	-webkit-flow-into: example-text-flow;
	padding: 0;
	margin: 0;
}
  
.regions {
	-webkit-flow-from: example-text-flow;
	border: 1px solid black;
	padding: 2px;
	margin: 5px;
	width: 200px;
	height: 50px;
}


The result can be seen in the demo , there are several examples a little more complicated.

Arrangement of blocks inside the content ( demo )


In responsive layouts, when you change the width of the browser window, the content usually behaves according to one scenario - the text is compressed in one column, and the sidebars appear under it. For more correct arrangement of blocks on the page, it will soon be possible to use CSS regions.

For example, this is what a page with content and ad units looks like:
And on a mobile device, you need to get the option on the right:
HTML design code:

<section class="main-content">
  <article> ... </article>
  <div class="ad-region-1">
    <!-- empty, ads flow into here as needed -->
  </div>
  <article> ... </article>
  <div class="ad-region-2">
    <!-- empty, ads flow into here as needed -->
  </div>
  <article> ... </article>
  <div class="ad-region-3">
    <!-- empty, ads flow into here as needed -->
  </div>
</section>
<aside>
   <!-- Fallback content in this flow region, probably clone #ad-source -->
</aside>
<!-- Source of flowing content, essentially hidden as an element -->
<div id="ad-source">
  <a href="#"><img src="ads/1.jpg"></a>
  <a href="#"><img src="ads/2.jpg"></a>
  <a href="#"><img src="ads/3.jpg"></a>
  <a href="#"><img src="ads/4.png"></a>
</div>


CSS for ad units - “ad-source”:

#ad-source {
  -webkit-flow-into: ads;
  -ms-flow-into: ads;
}


CSS for the content:

aside, [class^='ad-region'] {
  -webkit-flow-from: ads;
  -ms-flow-from: ads;
}


CSS for different browser window widths:

[class^='ad-region'] {
  display: none;
  height: 155px;
  width: 100%; /* Weird that this is required */
}

@media (max-width: 800px) {
  [class^='ad-region'] {
    display: block;
  }
  [class^='ad-region']:last-child {
    height: 300px; /* I wish height auto worked */
  }
  aside {
    display: none;
  }
}


Adobe examples



Great examples of using CSS regions were shown by Adobe itself.

You can still do this:
And when using Javascript, you can make the text flow around objects dynamically:





Documentation


Detailed CSS region documentation by Adobe. It is still under development and is constantly changing.

Used materials and useful links on the topic