LESS string-set 的现代替代方案是什么？

背景回顾 #

string-set 曾是用于将元素内容存入变量、方便在页眉或页脚调用的CSS特性，但该特性已被废弃，自Chrome 39版本起未被主流浏览器实现，仅在LESS预处理器中仍可使用。它的经典用法是把匹配到的最新元素内容存入变量，后续通过string(varname)调用——比如将<h1>的内容同步到所有.header元素中，每次遇到<h1>时变量值会自动更新：

h1 { string-set: chapterTitle; }
.header { content: string(chapterTitle); }

现代替代方案 #

1. CSS自定义属性 + JavaScript（通用方案）

这是适配性最强的方案，通过JavaScript动态获取目标元素的内容，赋值给CSS变量，再在需要的地方引用：

CSS部分：

:root {
  --chapter-title: "";
}

.header {
  content: var(--chapter-title);
}

JavaScript部分：

// 获取页面中最后一个h1的内容并更新变量
const lastH1 = document.querySelector('h1:last-of-type');
if (lastH1) {
  document.documentElement.style.setProperty('--chapter-title', `"${lastH1.textContent.trim()}"`);
}

// 若页面内容动态加载，可监听DOM变化自动更新
const observer = new MutationObserver(() => {
  const latestH1 = document.querySelector('h1:last-of-type');
  if (latestH1) {
    document.documentElement.style.setProperty('--chapter-title', `"${latestH1.textContent.trim()}"`);
  }
});
observer.observe(document.body, { childList: true, subtree: true });

2. CSS计数器 + 伪元素（有序/静态内容场景）

如果是章节标题这类有序或静态内容，可以用CSS计数器配合自定义属性模拟：

body {
  counter-reset: chapter-title;
}

/* 通过h1的data-title属性更新计数器 */
h1 {
  counter-set: chapter-title attr(data-title);
}

.header::before {
  content: counter(chapter-title);
}

使用时需要给<h1>添加data-title属性，比如<h1 data-title="第一章">第一章</h1>，动态内容需配合JavaScript更新data-title值。

3. 打印场景专属：CSS Paged Media（有限兼容）

如果是用于打印时的页眉/页脚，现代CSS Paged Media标准中的target-text可实现类似效果（仅部分浏览器支持）：

/* 给h1设置id */
h1 {
  id: current-chapter;
}

@page {
  @top-center {
    content: target-text(#current-chapter, content);
  }
}

目前Firefox对该特性支持较好，Chrome、Edge、Safari支持有限，如需广泛兼容仍推荐第一种方案。

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