什么是“CSS区域”，我为什么要关心它们？

Question

我刚看了一篇提到CSS区域的文章，所以Goggled找出它们是什么。我期待短，对它们的独立解释会显示在结果的顶部，但事实并非如此。

因此提出这个问题，以便下次有人做同一个谷歌时，会在结果的顶部等待他们。“

Answer 1

  

我刚读了一篇提到CSS Regions的文章，所以用Google搜索了解它们是什么。我期待对它们进行简短，独立的解释会出现在结果的顶部

咦？如果谷歌是“福特”，你可以获得福特的网站，而不是关于福特的简短，独立的解释。

  

我为什么要关心他们？

你不应该。目前，它是implemented only in later IE/Edge and Safari。它已经实施，但随后removed from Chrome, due to the complexity and mobile issues。它将获得足够的浏览器支持以实际广泛使用的可能性非常小。

地区是Adobe试图在网络上支持类似杂志的布局。但是，我们不需要网络上类似杂志的布局（“第29页继续”）。

Answer 2

嗯，简而言之，区域是一种以更复杂的方式布置网站文本内容的方法。例如：

Image Source

使用以下标记创建（省略不必要的样式）：

<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>

CSS：

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

在幕后，当一个元素具有flow-into CSS属性时，它的文本内容将从渲染中删除并延迟到文本的这个抽象“线程”，它将被分割为所有具有{{{ 1}}具有相同值的属性，按照它们在HTML中找到的顺序。