Chrome 119中CSS content的leader与target-counter属性值无效问题排查

问题描述 #

尝试通过CSS的leader('.')和target-counter(attr(href), page)实现目录右侧显示页码，但在Chrome 119中出现「invalid property value」错误，相关CSS代码被划掉。

用到的代码 #

CSS代码

.toc a {
  display: block;
}

.toc a::after {
  width: 50px;
  background: red;
  content: leader('.') target-counter(attr(href), page);
}

p {
  max-width: 100px;
}

HTML代码

<div class="toc"><a href="#first">first</a></div>
<div class="toc"><a href="#second">second</a></div>
<div class="toc"><a href="#third">third</a></div>

<h2 id="first">First</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h2 id="second">Second</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h2 id="third">Third</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

错误原因 #

leader()和target-counter()属于CSS Paged Media模块的特性，这类属性仅在分页媒体环境（比如打印预览、PDF导出场景）中生效，浏览器的常规屏幕渲染环境并不支持这些属性，因此Chrome会判定该content值为无效属性。

实现方案 #

方案1：针对打印场景的修复 #

如果需求是在打印或PDF导出时显示页码，只需调整CSS，确保分页媒体规则正确，同时补充必要的分页设置：

/* 屏幕渲染时隐藏无效的伪元素 */
@media screen {
  .toc a::after {
    content: none;
  }
}

/* 分页媒体环境下启用规则 */
@media print {
  .toc a {
    display: block;
    position: relative;
  }

  .toc a::after {
    content: leader('.') target-counter(attr(href), page);
    position: absolute;
    right: 0;
  }

  /* 强制标题分页，方便测试页码 */
  h2 {
    page-break-before: always;
  }

  p {
    max-width: 100px;
  }
}

打开Chrome的打印预览（Ctrl+P）即可看到正确的页码和点线效果。

方案2：屏幕渲染时模拟效果 #

如果需要在屏幕上也显示类似的目录页码效果，由于浏览器不支持leader()和target-counter()，可以用flex布局+伪元素模拟点线，页码需要手动指定或通过JS动态计算：

.toc {
  margin: 1rem 0;
}

.toc a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* 模拟点线 */
.toc a::after {
  content: '';
  flex-grow: 1;
  margin: 0 0.5rem;
  border-bottom: 1px dotted #000;
}

/* 手动指定页码，或通过JS动态生成 */
.toc a .page-num {
  flex-shrink: 0;
}

对应的HTML调整为：

<div class="toc"><a href="#first">first <span class="page-num">1</span></a></div>
<div class="toc"><a href="#second">second <span class="page-num">2</span></a></div>
<div class="toc"><a href="#third">third <span class="page-num">3</span></a></div>

如果需要动态计算页码，可以通过JS监听滚动或布局变化，计算每个标题对应的页面位置后更新.page-num的内容。

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