Each feature in detail
MDN The link-parameters CSS property sets values of external resources, such as SVGs, whose attributes have been set with the env CSS function
Syntax
none | <param()>#
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- none
- Applies to
- all elements and pseudo-elements
- Inherited
- no
- Percentages
- n/a
- Computed value
- as specified
- Canonical order
- per grammar
- Animation type
- discrete
Browser support
First browser version supporting link-parameters | Chrome | No |
| Edge | No |
| Firefox | Preview |
| Safari | Preview |
| Chrome Android | No |
| Safari iOS | No |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
Spec All three methods of setting link parameters share the same syntax for defining a parameter, using the param() function:
MDN The param() CSS function is used to set link parameters. It can be used in the link-parameters CSS property, in the URL fragment of an external resource, or in the <url-modifier> of the url() CSS function.
Live preview Example from MDN
.squares {
height: 200px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
img {
height: 100%;
}
.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);
}
}
<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>
Syntax
param( <param-spec> , <declaration-value>? )
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Browser support
First browser version supporting param() | Chrome | No |
| Edge | No |
| Firefox | Preview |
| Safari | No |
| Chrome Android | No |
| Safari iOS | No |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗