设置Container Queries后CSS Counter失效问题咨询

当给已实现CSS计数器的元素添加容器查询后，计数器完全停止工作，该问题在Firefox和Chrome中均会出现。这是正常现象，原因如下：

复现代码 #

CSS

.list li { background: lightpink; }

.withContainer {
  container: thislist / inline-size;
}
@container thislist (max-width: 600px) {
  .withContainer li { background: gold; }
}

.withCounter {
  counter-reset: listCount;
}
.withCounter li:after{
  content: counter(listCount);
  counter-increment: listCount;
}

HTML

<ul class="list withContainer">
    <li>item </li>
    <li>item </li>
    <li>item </li>
  </ul>
  <ul class="list withContainer withCounter">
    <li>item </li>
    <li>item </li>
    <li>item </li>
  </ul>
  <ul class="list withCounter">
    <li>item </li>
    <li>item </li>
    <li>item </li>
  </ul>

原因分析 #

容器查询会创建新的包含块（containing block），而CSS计数器的作用域与包含块绑定。当你给元素设置container属性时，该元素会成为容器查询上下文，同时成为子元素的包含块。此时.withCounter上的counter-reset定义在新包含块之外，而:after伪元素属于容器内的子元素，处于新包含块的作用域中，无法访问外部的计数器，导致计数器无法正常递增和显示。

解决方案 #

确保counter-reset和counter-increment处于同一个包含块作用域内，可将计数器样式拆分到容器查询作用域和非容器状态下：

.list li { background: lightpink; }

.withContainer {
  container: thislist / inline-size;
}
@container thislist (max-width: 600px) {
  .withContainer li { background: gold; }
  /* 容器查询内的计数器逻辑 */
  .withContainer.withCounter {
    counter-reset: listCount;
  }
  .withContainer.withCounter li:after {
    content: counter(listCount);
    counter-increment: listCount;
  }
}

/* 非容器状态下的计数器逻辑 */
.withCounter:not(.withContainer) {
  counter-reset: listCount;
}
.withCounter:not(.withContainer) li:after {
  content: counter(listCount);
  counter-increment: listCount;
}

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