What is the modern equivalent of LESS string-set

Question

For examples of string sets and their uses, see Using LESS String Set Properties and Content Methods

After much confusion, I discovered that this is deprecated and has not been implemented since Chrome version 39, although it apparently continues to exist in LESS.

The textbook use case is to get the latest match of the style and put it into a variable so that it can subsequently be used by string(varname) in the header or footer.

For example, the following code will put the contents of the h1 tag into anything of class .header, and the value of varname with each successive of h1

to update

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

What is the modern equivalent?

Answer 1

Polyfill required. Pagedjs can do it, and apparently less.

However, in the code I referenced in the question, I captured the value incorrectly. It should look like the picture below. You can think of string-set as a function that takes two values: the symbol name and the source of the symbol value.

Once a value is captured, the string is available for use and the value can be obtained using string(SYMBOL_NAME). In this case, a value is captured every time an H1 element or element of class chapterTitle is encountered.

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

Similar to application, but capable of capturing the entire element graph is position: running(ELEMENT_NAME), which when applied to an element by the class removes the element and all of its children from the stream And make it available for use by content: element(ELEMENT_NAME);. The advantage of element graphs instead of strings is that you can use , , styled containers or even and to start the running header/footer "text".

If this is unfamiliar CSS, it's because no browser has implemented this part of the standard. But pagedjs will populate it for you.