param() CSS function
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
css
/* a single value */
param(--color, red);
/* multiple values */
param(--color1, red),
param(--color2, blue),
param(--color3, green);
Values
-
- A
<dashed-ident>is a user defined variable that is used as an identifier in theenv()CSS function to update the value.
- A
-
<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.
- : A
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.
svg
<!-- 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.
html
<div class="squares">
<img class="original" src="square.svg" />
<img class="greyscale" src="square.svg" />
<img class="high-contrast" src="square.svg" />
</div>
css
.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.
html
<img
src="square.svg#param(--color1, slategrey)¶m(--color2, lightgrey)"
alt="greyscale version of square"
/>
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.
css
.foo {
background-image: url(
"square.svg"
param(--color1, slategrey),
param(--color2, lightgrey)
);
}