Description
In #6408, I apparently misremembered the existence of a proposal for a pseudo-function similar to attr()
, var()
or env()
, so I will hereby submit one. ;)
The Link Parameters module specifies several ways to pass parameters from a stylesheet (link-parameters
property, url()
function) or a random URL (#param()
), e.g. embedded within an HTML document, to a target resource that understands CSS Custom Properties, i.e. usually a stylesheet or an SVG image.
Stylesheet Variant
This proposal is about a more generic way at the receiving end:
A new pseudo-function, say arg()
(TBB), gives access to the query parameters used in the URL to include the stylesheet (or host document in case of inline styles). It works mostly identical to attr()
, just is the same for all elements.
/* style.css */
:root {
--param: arg(color type(<color>), red);
}
#test {
background: var(--param, orange);
color: arg(color type(<color>), magenta);
}
<!-- host.html -->
<link rel="stylesheet" href="style.css?color=green">
<a id="test">Test</a><!--green on green-->
<b style="color: arg(color type(<color>), purple);">Test</b><!--purple-->
<!-- host.html?color=blue -->
<link rel="stylesheet" href="style.css?color=lime">
<a id="test">Test</a><!--lime on lime-->
<b style="color: arg(color type(<color>), purple);">Test</b><!--blue-->
<img src="example.svg"><!--magenta on red-->
<img src="example.svg?color=olive"><!--olive on olive-->
Host Variant
Instead of the URL parameters of the stylesheet, arg()
always accesses the query component of the host document. For SVG images with inline styles, the end result is the same.
<!-- example.svg -->
<style>
:root {
--param: arg(color type(<color>), red);
}
#test {
fill: var(--param, orange);
stroke-color: arg(color type(<color>), magenta);
}
</style>
<tspan id="test">Test</tspan><!--magenta on red by default-->
<!-- host.html?color=blue -->
<link rel="stylesheet" href="style.css?color=green">
<a id="test">Test</a><!--blue on blue!-->
<b style="color: arg(color type(<color>), purple);">Test</b><!--blue-->
<img src="example.svg"><!--blue on blue!-->
<img src="example.svg?color=green"><!--green on green?-->