如何使用CSS生成的动态内容可用于CSS？

Question

I am using WordPress. A plugin has php code segments that, once loaded in html, create strings dependant on user choices. I would like to use such strings in CSS. I have already tried Right-way-for-pass-variable-php-to-css-in-wordpress, but including a CSS stylesheet with PHP code as style.php does not work (maybe something from the Wordpress theme is interfering).

Is there another way to do this?

Answer 1

Here is a working solution:

Put the php code that produces the string into a php file of the page that is always loaded (e. g. the header.php). Assign an ID.

<div id="myid"><?php produces-a-string ?></div>

Make the html string it produces invisible to the ordinary user with CSS:

 #myid {
display: none;
}

Grab the loaded string with JavaScript to create a CSS variable:

var grab = document.getElementById("myid");
var text = grab.innerText;
grab.setProperty("--grabbed", text);

Caution: The php content must be loaded before JavaScript, else the corresponding JavaScript variable will be null. If you put the php segment in the header, do it before it calls JavaScript. If you put it below, or in another part of the page, place the above code in an event listener "load".

This creates the CSS code:

#myid {
--grabbed: string-produced;
}

The string can then be used by other CSS attributes:

main {
attribute: var(--grabbed);
}

which acts like:

main {
attribute: string-produced;
}

Caution: If you want to use the produced string with CSS attribute "content", creating a CSS variable does not work, as content does not accept var() as value.

But I found a hack, as content accepts attr() as value. Change JavaScript to:

var grab = document.getElementById("myid");
var text = grab.innerText;
grab.setAttribute("title", text);

This assigns the HTML global attribute (allowed for any HTML element) "title" to div myid, giving it the value of the php string. You can chose any global attribute.

This creates the HTML code:

<div id="myid" title="string-produced"></div>

Caution: In JavaScript, you have to assign the title attribute to the element with the class or id you want to add a "content" attribute to:

document.getElementBy(id-where-content-is-added).setAttribute("title", text);

This makes the following possible:

#id-where-content-is-added {
content: attr(title);
}

which acts like:

#id-where-content-is-added {
content: string-produced;
}