The world of web design has been revolutionized with the advances in CSS3, significantly easing the creation of complex and adaptive layouts.
Among the groundbreaking features of CSS3 such as Flexbox and Columns comes a new game-changing component: CSS Regions.
CSS Regions enable content to be distributed among multiple sections on a page, much like linking text frames in desktop publishing programs like InDesign. This functionality opens up possibilities for design layouts that used to be challenging to achieve without mixing content with styling.
Compatibility with Web Browsers
Browser support for CSS Regions is currently a mixed bag.
Being an experimental draft feature, CSS Regions currently sees varying levels of support. Originally, Internet Explorer 10 was the sole browser offering support, using an iframe to handle the content.
Safari also supports it, though with a required prefix.
For those using Chrome, the feature can be accessed via the ‘about:flags’ menu where you can enable ‘experimental webkit features’, followed by a browser restart.
Thankfully, a JavaScript polyfill by Adobe is available on GitHub, which emulates CSS Regions on browsers lacking native support.
How to Implement CSS Regions
When employing CSS Regions, you’ll need content to distribute:
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
Next, you’ll want to create the multiple sections for your content:
<div class="containers"></div>
<div class="containers"></div>
<div class="containers"></div>
After setting up our base content, we connect the sections using flow-into and flow-from, including the necessary -webkit- prefix.
.text {
-webkit-flow-into: text-flow;
/* Additional styling properties */
}
.containers{
-webkit-flow-from: text-flow;
/* Container styling properties */
}
In a browser, you’ll see the content flow seamlessly from one container to the next, and you can adjust the positioning as required to maintain the flow.
Decoding flow-into
-webkit-flow-into: text-flow;
This directive designates an identifier that diverts content into a specific flow, removing it from the regular page flow unless reverted with ‘none’.
Make sure to consistently name your flow. Interestingly, it’s not limited to text; images and other HTML elements can also be flowed.
Decoding flow-from
-webkit-flow-from: text-flow;
Through this property, we determine where the specified flow’s content is displayed.
The identifier matches the one used in the flow-into property, ensuring the designated content appears in the correct containers.
One key aspect to remember is that the original formatting of your content carries over through the entire flow.
Concluding Thoughts
To witness CSS Regions in action, consider viewing this demo.
While browser support for CSS Regions is still evolving, the prospect of what they enable is impressive. Once support is consistent, we may find CSS Regions to be an indispensable part of web design.
What are your thoughts on CSS Regions? Do you foresee their widespread adoption in the near future? Share with us below.
Featured image/thumbnail, waterfall image via cuatrok77.
