Is it possible to include metadata with a dynamically created CSS stylesheet that is returned via a <link> tag and read it with JavaScript?
(In my scenario, the stylesheet I return consists of multiple smaller ones, and I want my JavaScript code to be able to detect which smaller ones were included.)
I thought about adding custom properties to an element:
body {
-my-custom-prop1:0;
-my-custom-prop2:0;
}
However, when trying to access these properties using:
window.getComputedStyle(document.body)['-my-custom-prop1']
they are not returned. Any other suggestions?
EDIT: Upon further consideration, I opted for a slightly different approach. Instead of using a <link> tag to retrieve the stylesheet, I made an AJAX request to fetch the stylesheet's text and added it to a <style> tag. This allowed me to leverage HTTP response headers to include metadata. Keep in mind that this method may not work across domains, unlike a <link> tag.