Was ist das moderne Äquivalent von LESS string-set?

Question

Beispiele für String-Sets und ihre Verwendung finden Sie unter Verwenden von LESS-String-Set-Eigenschaften und Inhaltsmethoden

Nach langem Durcheinander habe ich herausgefunden, dass dies veraltet ist und seit Chrome-Version 39 nicht mehr implementiert wurde, obwohl es in LESS offenbar weiterhin existiert.

Der Lehrbuch-Anwendungsfall besteht darin, die neueste Übereinstimmung des Stils abzurufen und sie in eine Variable einzufügen, damit sie dann von string(varname)in der Kopf- oder Fußzeile verwendet werden kann.

Zum Beispiel wird der folgende Code aktualisiert h1 标记的内容放入 .header 类的任何内容中，以及 varname 的值随着每个连续的 h1

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

Was ist das moderne Äquivalent?

Answer 1

需要 Polyfill。 Pagedjs 可以做到，而且显然也更少。

但是，在我在问题中引用的代码中，我错误地捕获了该值。应该如下图所示。您可以将 string-set 视为一个采用两个值的函数：符号名称和符号值的来源。

捕获值后，该字符串就可供使用，并且可以使用 string(SYMBOL_NAME) 获取该值。在这种情况下，每次 H1 元素或遇到 chapterTitle 类的元素时都会捕获一个值。

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

与应用程序类似，但能够捕获整个元素图的是 position: running(ELEMENT_NAME)，当类将其应用于元素时，会从流中删除该元素及其所有子元素并使其可用供 content: element(ELEMENT_NAME); 使用。元素图而不是字符串的优点是您可以使用 、、样式化容器甚至 code> 和 来启动正在运行的页眉/页脚的“文本”。

如果这是不熟悉的 CSS，那是因为没有浏览器实现了这部分标准。但 pagedjs 会为你填充它。