param() CSS function
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The param() CSS function is used to set link parameters. This can be done using the link-parameters CSS function, in the fragment URL of an external resource, or in the <url-modifier> of the url() CSS function.
Syntax
/* a single value */
param(--color, red);
/* multiple values */
param(--color1, red),
param(--color2, blue),
param(--color3, green);
Values
<dashed-ident>-
A
<dashed-ident>is a user defined variable that is used as an identifier in theenv()CSS function to update the value. <declaration_value>Optional-
A
<declaration_value>is the value of the attribute being updated. If the<declaration-value>is omitted, it represents an empty value.
Formal definition
Value not found in DB!Examples
All of the following examples use the same SVG file, which has attributes set with env() CSS function.
<!-- example of the code in the external SVG file -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect
width="100"
height="100"
stroke="env(--color1, chartreuse)"
stroke-width="10"
fill="env(--color2, darkgreen)"
/>
</svg>
Using link-parameters property
In this example the SVG attributes are updated with the link-parameters CSS property and param() function.
<div class="squares">
<img
class="original"
src="square.svg"
alt="A square with a chartreuse border and a dark green fill." />
<img
class="greyscale"
src="square.svg"
alt="A square with a slate grey border and a light grey fill." />
<img
class="high-contrast"
src="square.svg"
alt="A square with a fuchsia border and a yellow fill." />
</div>
.greyscale {
link-parameters:
param(--color1, slategrey),
param(--color2, lightgrey);
&:hover {
link-parameters:
param(--color1, lightgrey),
param(--color2, slategrey);
}
}
.high-contrast {
link-parameters:
param(--color1, fuchsia),
param(--color2, yellow);
&:hover {
link-parameters:
param(--color1, yellow),
param(--color2, fuchsia);
}
}
Passing param() into URL modifier
In this example the SVG attributes are updated by passing the param() function into the URL fragment of the src attribute of the <img> HTML element.
<img
src="square.svg#param(--color1, slategrey)¶m(--color2, lightgrey)"
alt="A square with a slate grey border and a light grey fill."
/>
Using param() with background-image property
In this example the SVG attributes are updated by passing the param() function into the url() data type of the background-image CSS property.
.foo {
background-image: url(
"square.svg"
param(--color1, slategrey),
param(--color2, lightgrey)
);
}
Specifications
| Specification |
|---|
| CSS Linked Parameters Module Level 1 # funcdef-param |