CODEWITHSUNDEEP
css
Ian Ringrose
Ian Ringrose

Reputation: 51927

What are "CSS Regions" and why should I care about them?

I just read an article that mentions CSS Regions, so Goggled to find out what they are. I was expecting that a short, independent explanation of them would show up at the top of the results, it did not.

Hence asking this question, so that the next time someone does the same Google, there will be a good answer waiting for them at the top of the results.

Upvotes: 3

Views: 410

Answers (2)

user663031
user663031

Reputation:

I just read an article that mentions CSS Regions, so Googled to find out what they are. I was expecting that a short, independent explanation of them would show up at the top of the results

Huh? If you Google for "Ford", you get Ford's website, not a short, independent explanation about Ford.

Why should I care about them?

You shouldn't. Currently, it's implemented only in later IE/Edge and Safari. It was implemented but then removed from Chrome, due to the complexity and mobile issues. The chances that it will ever gain enough browser support to actually be used widely are vanishingly small.

Regions are Adobe's attempt to support magazine-like layouts on the web. However, we don't need magazine-like layouts ("continued on p. 29") on the web.

Upvotes: 3

Kroltan
Kroltan

Reputation: 5156

Well, to be short, Regions are a way to layout the site's textual content in a more complex manner. For example:

Example headline + 3 columns Image Source

This is created with the following markup (omitted unnecessary styling):

<h1>Flowing Text</h1>
<div id="text_source">When the beginning of your article... (continues) ...Flows allow this kind of flexibility.</div>
<div class="small_text"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>

And the CSS:

#text_source { flow-into: text-thread; flow-from: text-thread; }
.small_text { flow-from: text-thread; }
.column { flow-from: text-thread; }

Behind the scenes, when an element has a flow-into CSS property, it's textual contents are removed from rendering and deferred to this abstract "thread" of text, that will be split across all elements that have a flow-from property with the same value, in the order they are found in the HTML.

Upvotes: 1

Related Questions