区域

级联样式表 (CSS) 区域是 Windows 8 中使用 JavaScript 的 Windows 应用商店应用中和 Internet Explorer 10 中的页面布局功能。CSS 区域由 CSS 区域规范的万维网联合会 (W3C) 标准进行定义,该规范当前仍是一份工作草案。使用 CSS 区域,开发人员和设计人员可以提取既包括文本又包括图像的 HTML 内容的单个流,并将该流分割成在标准 HTML 模板中定义的多个空容器。“HTML 模板”是指原始内容大多为空但主要由一些空容器组成的文档,这些空容器在经过大小和位置的调整之后为传入的内容提供特定的布局。

这样,持续的内容流就可以根据情况(例如,根据平板电脑的使用情况)重新调整布局结构。

在单个页面中,CSS 区域允许 Web 开发者开发与杂志或报纸上的布局等效的复杂内容布局,即,同一个内容流(文本、相关图片、视频等)的多个区域围绕不相关的内容元素(如备用报道或广告)。

实现 CSS 区域

要实现 CSS 区域,首先需要一个充当内容流的 HTML 文件。它是一个独立的 HTML 文档,其中包含其自己的文档对象模型 (DOM) 和其自己的 CSS 样式。在下图中,文件“content.html”表示内容流。

然后,你需要一个充当内容流宿主的 HTML 文档。这个宿主文档或母版页负责调整 CSS 区域的大小和位置,并定义内容流将分流到的流标识符。在下图中,文件“master.html”表示母版页。

此图显示的是一个概念“等式”:包含多个框架的 master.html 文件,加上包含 HTML 内容流的 content.html 文件,等于框架中填充了流内容的 master.html 文件。

当母版页完全呈现出来时,它将包含一些包含流内容的已连接区域。切记,这种分段方式纯粹是为了演示,并不影响内容流文档的 DOM 结构。

创建数据源

CSS 区域需要两个新的 CSS 属性,以使内容能以流的形式依次从数据源传输到区域中。要概括内容流,数据源和标识符都是必不可少的。首先,将数据源放置在 iframe 元素上以加载到单个 HTML 文档中。在母版页中,创建一个具有独特 ID 的 iframe,例如:


<iframe id="flow1-data-source" src="content-source.html"></iframe>

然后,创建一个 CSS 选择器,指定使用 -ms-flow-into 属性的数据源:


#flow1-data-source {
  -ms-flow-into: flow1;
}

注:如果将 -ms-flow-into 属性放置到 iframe 元素上,则该元素的操作方式与将 display 属性设置为 "none" 时相同。此 iframe 元素不可用于呈现内容,也不参与内容分散或布局。该元素仅用于标识从其中创建内容流的数据源。

创建 CSS 区域容器

任何非替换元素都能被用作 CSS 区域容器;然而,div 元素是用于该用途的最常用元素。

要创建 CSS 区域容器,先在母版页上指定你要用作容器唯一的类名称的元素,例如:


<div class="flow1-container"></div>
<div class="flow1-container"></div>
<div class="flow1-container"></div>


然后,创建一个 CSS 选择器,该选择器指定使用 -ms-flow-from 属性从其中接受内容流的数据源:


.flow1-container {
  -ms-flow-from: flow1;
}

指定 CSS 区域容器的元素中的内容将在母版页上按照 DOM 源的顺序来呈现。当以静态方式指定区域时,内容将被分散到 DOM 中的指定容器元素中。

扩展 CSS 区域

你可以使用与源顺序无关的布局功能来创建更复杂的布局方案。例如,可以使用新的网格对齐功能创建复杂的可流动布局。例如,考虑下面的标记:


<!DOCTYPE html>
<html lang="en-us">
<head>
<style type="text/css">
#data-source {
  -ms-flow-into: flow1;
}
.flow-container {
  -ms-flow-from: flow1;
}
#grid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 384px 384px;
}
.A {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-row-span: 2;
}
.B {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
.C {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.D {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
}
.E {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
}
</style>
</head>
<body>
  <iframe id="data-source" src="content-source.html"></iframe>
  <div id="grid">
    <div id="region1" class="A flow-container"></div> 
    <div id="region2" class="B flow-container"></div>
    <div id="region3" class="C flow-container"></div> 
    <div id="region4" class="D flow-container"></div>
    <img class="E" src="image.png" />  
  </div>
</body>
</html>


这使得内容按照下图所示流动。箭头指示内容流动的方向。

图中显示内容在网格布局内的框架之间流动。

让我们将前两个框架和最后两个框架的顺序交换:


<iframe id="data-source" src="content-source.html"></iframe>
<div id="region1" class="B flow-container"></div>
<div id="region2" class="A flow-container"></div> 
<div id="region3" class="C flow-container"></div>
<div id="region4" class="E flow-container"></div>
<img class="D" src="image.png" />

这会将流动改为下图所示的方向:

图中显示在框架已完成切换之后,内容在网格布局内的框架之间的流动。即使每个框架位于网格内的不同位置,内容仍然按照顺序流动。

这使你能直观地指定页面的布局,无需彻底修改模板的标记,也无需中断源内容的 DOM。

其他 CSS 区域方案

除了前面所给的两个示例,CSS 区域还可实现其他一些有用的方案:

  • 在当前 div 已满时,通过将新的 div 添加到母版页来动态地创建内容区域。
  • 使用户能修改内容文档,并使更新的内容按照预期回流。例如,用户可选择增加文本的大小,这会导致重新生成每个 div 以保证所有内容都可见。
  • 访问与特定内容区域相关联的分段范围。

API 参考

Regions

示例和教程

CSS 区域示例

有关 Internet Explorer 的 Test Drive 演示

实例演示:CSS3 区域

IEBlog 文章

在 IE10 中构建以 RTF 为主的网页

规范

CSS 区域模块级别 3

 

 

显示:
© 2014 Microsoft