CSS position语法中running()的含义、用途及相关语法疑问

问题 #

在MDN列出的position属性正式语法中，包含了如下可选值：

position = 
  static       |
  relative     |
  absolute     |
  sticky       |
  fixed        |
  <running()>  

<running()> = 
  running( <custom-ident> )

除<running()>外，其余值均在CSS工作组的position属性当前草案中有明确说明，且CSS值定义语法中未提及此类函数式表示。现咨询：

• running()的含义是什么？
• 其语法设计的目的是什么？
• 是否为特定浏览器的扩展？
• 该语法中的函数式表示有何意义？

本人已在MDN、谷歌及CSS工作组草案中搜索相关内容，但未找到相关参考资料。

回答 #

1. running()的含义 #

running()是CSS分页媒体相关规范里的特性，专门用于打印PDF、多页文档这类分页媒体场景。它的作用是标记一个元素为「运行元素」——这个元素的内容可以被提取出来，在文档的页眉、页脚等位置重复显示。

2. 语法设计的目的 #

分页媒体中经常需要把文档里的动态内容（比如当前章节标题、文档副标题）自动放到每一页的页眉或页脚，不用手动在每一页重复编写内容。running()就是为了实现这种动态复用的需求而设计的。

3. 是否为特定浏览器扩展？ #

它本质是W3C的CSS分页媒体生成内容规范草案中的内容，但目前只有Firefox浏览器（需要加前缀-moz-，即position: -moz-running(xxx)）实现了部分功能，Chrome、Safari等浏览器还未支持，所以看起来像是Firefox专属，但并非浏览器私有扩展，只是还没进入广泛实现阶段。

4. 函数式表示的意义 #

running(<custom-ident>)里的<custom-ident>是自定义标识符，用来建立元素间的关联：

• 第一步：给需要复用的元素设置position: running(my-header)（Firefox下为-moz-running(my-header)），标记它为可被调用的运行元素；
• 第二步：在页眉/页脚的伪元素（比如@page规则里的@top-center）中，用content: element(my-header)调用这个元素的内容，实现每一页自动显示最新的关联内容。

内容的提问来源于stack exchange，提问作者Jonathon Richardson