Skip to content

[css-env][css-link-params] Function to access stylesheet URL data #10820

Open
@Crissov

Description

@Crissov

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?-->

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions