CSS `CSS Regions` (废弃) 与 `CSS Exclusions` (废弃) 的设计思想

好的，各位观众老爷们，今天咱们来聊聊两个已经凉透了的CSS特性：CSS Regions和CSS Exclusions。别怕，虽然它们已经进了历史的垃圾堆，但研究它们的设计思想，能帮我们更好地理解CSS的演进，以及现代布局技术的设计理念。

开场白：老兵不死，只是逐渐凋零

这两位“老兵”虽然已经退役，但它们的设计初衷都是为了解决一个核心问题：如何让内容更灵活地在页面上流动，突破传统盒模型的限制？ 简单来说，就是想让文本像水一样，可以自由地填充到各种形状的容器中，而不是死板地待在矩形框框里。

第一幕：CSS Regions – 内容分区的梦想

想象一下，你有一篇长长的文章，你想把它分成几个区域显示在页面上，而且这几个区域形状各异，位置也不固定。传统的CSS布局，比如Flexbox或者Grid，虽然强大，但更擅长处理整体布局，对于内容如何“流入”这些区域，就显得有些力不从心了。

CSS Regions就是为了解决这个问题而生的。它的核心思想是：

定义区域（Regions）： 你先在页面上定义几个“容器”，这些容器可以是任何形状的HTML元素，它们就是Region。
内容流动（Flow）： 然后，你把文章的内容“倒”进一个“水渠”（Flow），这个水渠会自动把内容分发到你定义的Region里。

听起来是不是有点像流水线？

代码示例：

<!DOCTYPE html>
<html>
<head>
<title>CSS Regions Demo</title>
<style>
#article {
  flow-into: article-flow; /* 定义一个Flow */
}

.region {
  width: 200px;
  height: 150px;
  margin: 10px;
  border: 1px solid black;
  float: left; /* 重要：Region需要浮动或者使用其他布局方式 */
  flow-from: article-flow; /* 从指定的Flow接收内容 */
}

#region1 {
  shape-outside: circle(50%); /* 定义区域形状 */
  width: 150px;
  height: 150px;
}

#region2 {
  shape-outside: polygon(50% 0%, 0% 100%, 100% 100%); /* 定义区域形状 */
}
</style>
</head>
<body>

<div id="article">
  <p>这是一段很长很长的文章，用于演示CSS Regions的效果。它可以自动流动到不同的区域中，并根据区域的形状进行调整。 这段文字可以自动流动到不同的区域中，并根据区域的形状进行调整。 这段文字可以自动流动到不同的区域中，并根据区域的形状进行调整。 这段文字可以自动流动到不同的区域中，并根据区域的形状进行调整。 这段文字可以自动流动到不同的区域中，并根据区域的形状进行调整。 这段文字可以自动流动到不同的区域中，并根据区域的形状进行调整。</p>
</div>

<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
<div id="region3" class="region"></div>

</body>
</html>

代码解读：

flow-into: article-flow; 这行代码告诉浏览器，#article 元素的内容要“流入”名为 article-flow 的Flow。
.region { flow-from: article-flow; } 这行代码告诉浏览器，所有class为region的元素要从article-flow这个Flow接收内容。
shape-outside: circle(50%); 这行代码定义了Region的形状，这里定义了一个圆形。

CSS Regions的关键属性：

属性	描述
`flow-into`	指定一个元素的内容要流入哪个命名的Flow。
`flow-from`	指定一个元素从哪个命名的Flow接收内容。
`region-fragment`	控制内容在Region中如何显示，例如 `auto`（自动填充）或者 `break`（强制换行）。
`region-overflow`	(CSS Regions Level 2 草案) 定义Region溢出时的行为，比如显示省略号。这个属性在CSS Regions Level 1中没有，但在Level 2草案中有提及，但从未被广泛实现。
`getRegions()`	(JavaScript API) 可以通过JavaScript获取与某个Flow关联的所有Region元素。

CSS Regions的优点：

灵活的内容布局： 允许内容按照定义的区域形状流动，突破矩形框的限制。
内容与布局分离： 内容本身不需要关心布局，只需要定义好Flow和Region，内容会自动填充。

CSS Regions的缺点：

浏览器支持差： 只有部分浏览器支持，而且支持程度不一，兼容性问题严重。
复杂性较高： 理解和使用CSS Regions需要一定的学习成本。
性能问题： 内容流动和区域渲染可能会带来一定的性能开销。

第二幕：CSS Exclusions – 内容排斥的艺术

CSS Exclusions的目标是让内容“绕开”指定的元素，就像河流绕过石头一样。它可以让你在页面上创建一个“排斥区域”，让文本自动环绕在这个区域周围。

代码示例：

<!DOCTYPE html>
<html>
<head>
<title>CSS Exclusions Demo</title>
<style>
#container {
  width: 500px;
  height: 300px;
  border: 1px solid black;
  position: relative; /* 重要：创建定位上下文 */
}

#exclusion {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  position: absolute; /* 重要：需要绝对定位或者浮动 */
  shape-outside: circle(50%); /* 定义排斥区域的形状 */
  shape-margin: 10px; /* 可选：定义排斥区域的边距 */
  float: left;
}

#content {
  font-size: 16px;
}
</style>
</head>
<body>

<div id="container">
  <div id="exclusion"></div>
  <div id="content">
    <p>这是一段很长很长的文章，用于演示CSS Exclusions的效果。它可以自动绕开指定的排斥区域，实现环绕效果。这段文字可以自动绕开指定的排斥区域，实现环绕效果。这段文字可以自动绕开指定的排斥区域，实现环绕效果。这段文字可以自动绕开指定的排斥区域，实现环绕效果。这段文字可以自动绕开指定的排斥区域，实现环绕效果。这段文字可以自动绕开指定的排斥区域，实现环绕效果。这段文字可以自动绕开指定的排斥区域，实现环绕效果。这段文字可以自动绕开指定的排斥区域，实现环绕效果。</p>
  </div>
</div>

</body>
</html>

代码解读：

shape-outside: circle(50%); 这行代码定义了排斥区域的形状，这里定义了一个圆形。
shape-margin: 10px; 这行代码定义了排斥区域的边距，让文本和排斥区域之间有一定的间隙。

CSS Exclusions的关键属性：

属性	描述
`shape-outside`	定义元素外部的形状，内容会绕着这个形状流动。可以使用 `circle()`、`ellipse()`、`polygon()` 等函数来定义形状，也可以使用 `url()` 引用图片作为形状。
`shape-margin`	定义形状的边距，控制内容与形状之间的距离。
`wrap-flow`	(已废弃，但理解其设计思想有帮助) 定义内容如何绕排斥区域流动。可能的取值包括 `auto`（自动）、`wrap`（环绕）、`start`（从顶部开始）、`end`（从底部开始）、`clear`（清除排斥区域）。
`wrap-through`	(已废弃，但理解其设计思想有帮助) 定义内容是否可以穿过排斥区域。可能的取值包括 `wrap`（不穿过）和 `none`（穿过）。

CSS Exclusions的优点：

灵活的内容环绕： 可以让内容绕开指定的元素，实现各种复杂的排版效果。
简单易用： 相比CSS Regions，CSS Exclusions更容易理解和使用。

CSS Exclusions的缺点：

浏览器支持差： 同样只有部分浏览器支持，兼容性问题严重。
功能有限： 只能实现简单的内容环绕，对于更复杂的布局需求，就显得力不从心。

第三幕：失败的原因分析

CSS Regions和CSS Exclusions的设计理念是好的，但最终却未能流行起来，原因有很多：

浏览器支持不足： 这是最致命的原因。没有广泛的浏览器支持，开发者就无法在实际项目中使用这些特性。
复杂度较高： CSS Regions的概念比较抽象，学习成本较高。CSS Exclusions虽然简单一些，但也需要理解shape-outside等属性。
替代方案的出现： Flexbox和Grid等现代布局技术越来越强大，可以解决大部分的布局需求，而且兼容性更好，使用更方便。
规范的停滞： CSS Regions和CSS Exclusions的规范一直没有得到完善，缺乏标准化导致了实现上的差异和不确定性。

第四幕：它们的遗产 – Shape Outside与CSS Houdini

虽然CSS Regions和CSS Exclusions已经废弃，但它们的设计思想并没有完全消失。其中，shape-outside属性被保留了下来，并在CSS Shapes模块中得到了发展。

shape-outside属性可以用于定义元素的形状，不仅可以用于CSS Exclusions，还可以用于其他场景，比如让图片呈现非矩形的形状。

CSS Houdini：

更重要的是，CSS Regions和CSS Exclusions的设计思想为CSS Houdini的出现奠定了基础。CSS Houdini是一组底层API，允许开发者扩展CSS的功能，创建自定义的布局和渲染效果。

通过CSS Houdini，开发者可以实现类似CSS Regions和CSS Exclusions的功能，而且可以更加灵活和高效。例如，可以使用CSS Houdini的Layout API来实现自定义的区域布局，或者使用Paint API来实现自定义的形状和渲染效果。

结语：面向未来的布局

CSS Regions和CSS Exclusions的失败告诉我们，一个好的技术不仅需要解决实际问题，还需要具备良好的兼容性和易用性。虽然它们已经成为了历史，但它们的设计思想仍然值得我们学习和借鉴。

未来，随着CSS Houdini的不断发展，我们相信会有更多强大而灵活的布局技术出现，让网页设计更加自由和富有创意。

今天的讲座就到这里，谢谢大家！下次有机会再和大家聊聊CSS Houdini，那个才是真正值得期待的未来布局神器！

发表回复 取消回复

发表回复取消回复