CSS Regions – 小居

CSS Regions 的提案很早就有了，前端观察也在 2011 年的时候就译了 CSS3 Region：基于HTML和CSS3的富页面布局一文，但我首次听说还是苹果的 WWDC 2013 大会。

CSS Regions 目前依然是草案，变化可能还会很大。从目前的状态来看，和前端观察 2011 年那篇译文的写法已经有了很大的变化了。

CSS Regions 的主要目的是把一段文档进行更加丰富的排版，如分块、分栏和中有间隔等。

常规的分块展示内容看不出为何需要新工具。但如果需要对一段内容进行如下图那样的布局的话，问题就来了。需要计算每块能容乃的字数有多少，然后截字输出到对应模块。但还是存在着问题，对于现在的响应式布局又该如何动态调整？遇到图片呢？

如果说能有一个途径能自动把文档依次填充流入指定顺序的容器那就好了，而 CSS Regions 就是希望能达到这一目的。

CSS Regions 原理可以这样看，一根根管道，管道的一端关联任意数量任意位置的文档数据，另一端关联任意数量任意位置的容器。管道负责把文档数据按照其在页面出现的顺序来依次输入，然后按容器出现的顺序来依次输出到容器中，填满了则下一个。

也就是说 region 主要是流控制，至于容乃这些文档流的容器具体是如何放置的，这些就可以交给布局控制了。配合同属于 CSS3 的 FlexBox layout、grid layout 和 multi-column layout 等则可做出多栏间隔等排版了。

通过调整 HTML 的结构，就可以得到不同的数据流向了。比如下面两图就是 msdn 展示的通过改变 HTML 元素顺序和 grid layout 来实现的流向变化。

在支持 CSS Regions 的情况下，数据源在浏览器中的表现相当于 display:none ，不被渲染，即使没有定义相应的容器来容纳文档流。

由于规范本身还是草案，所以浏览器支持方面自然也不稳定，基本是实验性质的，默认不开启。但 IE10 已经默认支持 -ms 前缀的属性了，但是，其对于数据源仅支持单个 iframe。

最基本用法是：

.source {
    flow-into: user-defined-named-flow;
}

.region {
    flow-from: user-defined-named-flow;
}

变成 CSS region 的元素将是一个 block 容器，内部的内容将不被渲染展示，因此，不能定义嵌套的 region。

什么形式的标签才能作为 css region 的容器？

Shadow DOM、Custom Element、HTML Templates

定义 flow-into 时的选择器需要注意 table > * 会按照所想象的那样把 table 的内容移进流，但 table * 会把节点展开，孙节点会变成子节点的兄弟节点。

References