Quel est l'équivalent moderne du jeu de cordes LESS

Question

Pour des exemples de jeux de chaînes et de leurs utilisations, voir Utilisation des propriétés et des méthodes de contenu du jeu de chaînes LESS

Après beaucoup de confusion, j'ai découvert que ceci est obsolète et n'a pas été implémenté depuis la version 39 de Chrome, bien qu'il continue apparemment d'exister dans LESS.

Le cas d'utilisation du manuel consiste à obtenir la dernière correspondance du style et à la placer dans une variable afin qu'elle puisse ensuite être utilisée par string(varname)dans l'en-tête ou le pied de page.

Par exemple, le code suivant sera mis à jour h1 标记的内容放入 .header 类的任何内容中，以及 varname 的值随着每个连续的 h1

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

Quel est l'équivalent moderne ?

Answer 1

Nécessite Polyfill. Les Pagedjs peuvent le faire, et apparemment moins.

Cependant, dans le code que j'ai référencé dans la question, j'ai mal capturé la valeur. Cela devrait ressembler à l’image ci-dessous. Vous pouvez considérer string-set comme une fonction qui prend deux valeurs : le nom du symbole et la source de la valeur du symbole.

Une fois qu'une valeur est capturée, la chaîne est disponible pour utilisation et une valeur est capturée chaque fois qu'un élément de la classe string(SYMBOL_NAME) 获取该值。在这种情况下，每次 H1 元素或遇到 chapterTitle peut être utilisé.

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

Semblable à l'application, mais capable de capturer l'intégralité du graphique de l'élément position: running(ELEMENT_NAME)，当类将其应用于元素时，会从流中删除该元素及其所有子元素并使其可用供 content: element(ELEMENT_NAME); 使用。元素图而不是字符串的优点是您可以使用 、、样式化容器甚至 code> 和 pour lancer le "texte" d'un en-tête/pied de page en cours d'exécution.

Si ce CSS n’est pas familier, c’est qu’aucun navigateur n’a implémenté cette partie du standard. Mais pagedjs le remplira pour vous.