CSS锚点定位模块 第2级

1. 增量规范

这是一个增量规范，意味着目前仅包含与 CSS 锚点定位第1级 [CSS-ANCHOR-POSITION-1] 的不同之处。

2. 锚点定位的容器查询

本节扩展了 容器查询（来自 [css-conditional-5]）， 允许通过 锚点定位 查询元素的某些特性。

2.1. 通过 container-type 扩展 anchored

本规范为 container-type 属性（定义见 CSS Conditional 5 § 5.1 创建查询容器：container-type 属性） 增加了一个新的 anchored 关键字。anchored 可以与现有的容器类型一起使用，比如 scroll-state 和 size：

normal | [ [ size | inline-size ] || scroll-state || anchored ]

anchored

建立一个 查询容器 用于 容器查询， 允许锚点定位元素的后代根据锚点的某些特性进行样式化。 （目前仅限于哪些 position-try-fallbacks 被应用。）

anchored 类型的容器会对 样式包含生效于 查询容器。

注意：样式包含对于以下使用 计数器 的情况很重要，以避免布局循环：

• 我们有一个 anchored 容器

• 锚定容器的后代根据 fallback 查询对 计数器进行递增。

• 在树结构中紧跟锚定容器的 流内元素生成内容并使用计数器，影响 流内元素的尺寸。

• 流内元素影响 锚点元素的位置/尺寸。事实上， 流内元素本身可能就是 锚点元素。

• 锚点元素的位置/尺寸变化可能改变选用的 fallback，从而影响锚定查询的结果， 因此会影响计数器递增。

#anchored { container-type: anchored; }
#anchored-size { container-type: anchored inline-size; }

2.2. 扩展 @container 语法以支持 anchored 查询

为了查询 anchored 容器，anchored() 函数被添加到 @container 语法中。它通过在 '<query-in-parens>' 语法中添加如下产生式扩展了容器查询语法：

<query-in-parens> = ...
                  | anchored( <anchored-query> )

<anchored-query> = not <anchored-in-parens>
                | <anchored-in-parens> [ [ and <anchored-in-parens> ]* | [ or <anchored-in-parens> ]* ]
                | <anchored-feature>
<anchored-in-parens> = ( <anchored-query> )
                    | ( <anchored-feature> )
                    | <general-enclosed>

2.3. 锚定容器特性

2.3.1. 应用的 position-try-fallbacks：fallback 特性

fallback 容器特性用于查询锚点定位元素是否应用了任何计算得到的 position-try-fallbacks 选项。

none

anchored 容器未应用任何 position-try-fallbacks。

<dashed-ident> || <try-tactic>

anchored 容器匹配已应用的 <dashed-ident> 与 <try-tactic> 的组合。 如果查询值省略了 <dashed-ident> 或 <try-tactic>，则应用值也必须省略，反之亦然，才能匹配。

<dashed-ident> 规则名称在 fallback 匹配时不视为 树范围名称。

<try-tactic> 的顺序是有意义的。例如 flip-start flip-block 不等同于 flip-block flip-start。 因此查询时顺序必须一致，才能匹配 fallback。

<position-area-query>

anchored 容器应用了来自 position-try-fallbacks 的 <position-area>。如果 fallback 的应用值和查询值表示同一物理区域，则匹配。即 block-start 会在 top 在 writing-mode 为 horizontal-tb 时匹配。

查询值为 any 时，会在该轴上始终匹配。

#container {
  container-type: anchored;
  position: absolute;
  position-anchor: --a;
  position-area: left;
  position-try-fallbacks: right;
  &::before { content: ">"; }

  @container anchored(fallback: right) {
    &::before { content: "<"; };
  }
}

.anchored {
  container-type: anchored;
  position-try-fallbacks: --foo, --bar flip-inline;

  @container anchored(fallback: --bar flip-inline) {
    /* 如果 '--bar' fallback 被应用则生效 */
    .inner { background-color: green; }
  }
  @container anchored(fallback: --bar) {
    /* 不生效，因为 try-tactic 也必须匹配 */
    .inner { background-color: red; }
  }
}

.anchored {
  container-type: anchored;
  position-anchor: --a;
  position-try-fallbacks: right;
  writing-mode: vertical-rl;

  @container anchored(fallback: self-block-start) {
    /* 如果 'right' fallback 被应用则生效，因为在 'vertical-rl' 中 block-start 就是 'right'。 */
    .inner { background-color: green; }
  }
}

.anchored {
  container-type: anchored;
  position-anchor: --a;
  position-try-fallbacks: bottom right;
  writing-mode: vertical-rl;

  @container anchored(fallback: bottom any) {
    /* 生效，因为 'any' 匹配 'right'。 */
    .inner { color: lime; }
  }
  @container anchored(fallback: right) {
    /* 生效，因为垂直轴上的隐含 'any' 匹配 'bottom'。 */
    .inner { background-color: green; }
  }
}

2.3.2. <position-area-query>值的语法

用于查询 position-area fallback 的值，语法与 <position-area> 相同， 但每个产生式都额外添加了 any 关键字：

<position-area-query> = [
  [ left | center | right | span-left | span-right
  | x-start | x-end | span-x-start | span-x-end
  | self-x-start | self-x-end | span-self-x-start | span-self-x-end
  | span-all | any ]
  ||
  [ top | center | bottom | span-top | span-bottom
  | y-start | y-end | span-y-start | span-y-end
  | self-y-start | self-y-end | span-self-y-start | span-self-y-end
  | span-all | any ]
|
  [ block-start | center | block-end | span-block-start | span-block-end | span-all | any ]
  ||
  [ inline-start | center | inline-end | span-inline-start | span-inline-end
  | span-all | any ]
|
  [ self-block-start | center | self-block-end | span-self-block-start
  | span-self-block-end | span-all | any ]
  ||
  [ self-inline-start | center | self-inline-end | span-self-inline-start
  | span-self-inline-end | span-all | any ]
|
  [ start | center | end | span-start | span-end | span-all | any ]{1,2}
|
  [ self-start | center | self-end | span-self-start | span-self-end | span-all | any ]{1,2}
]

any

any 可以用于一个或两个轴。它指代的轴是不明确的，处理方式与 '<position-area>' 里的其他不明确关键字（如 start 或 center）一致，适用于分配轴和复制单关键字值的场景。

start, end, self-start, self-end

top, bottom, left, right

y-start, y-end, self-y-start, self-y-end

x-start, x-end, self-x-start, self-x-end

block-start, block-end, self-block-start, self-block-end

inline-start, inline-end, self-inline-start, self-inline-end

center

span-start, span-end, span-self-start, span-self-end

span-top, span-bottom, span-left, span-right

span-y-start, span-y-end, span-self-y-start, span-self-y-end

span-x-start, span-x-end, span-self-x-start, span-self-x-end

span-block-start, span-block-end, span-self-block-start, span-self-block-end

span-inline-start, span-inline-end, span-self-inline-start, span-self-inline-end

span-all

具体定义见 '<position-area>'。

如果只给出一个关键字，且该关键字没有轴歧义，则 '<position-area-query>' 的行为，就如同第二个关键字为 any。这与 '<position-area>' 处理单关键字不同，后者的第二个关键字为 span-all。 其他情况下，'<position-area-query>' 在分配轴时行为与 '<position-area>' 一致。

3. 安全性注意事项

目前未发现任何安全性问题。

4. 隐私注意事项

目前未发现任何隐私问题。