`link-parameters` CSS property

Baseline Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The link-parameters CSS property sets values of external resources, such as SVGs, whose attributes have been set with the env() CSS function

Syntax

/* single value */
link-parameters: param(--color, red);

/* multiple values */
link-parameters:
  param(--color1, red),
  param(--color2, blue),
  param(--color3, green);

Values

none: No link parameters are specified.
param(): A list of one or more link parameters.

Formal definition

Initial value	none
Applies to	all elements, `::before` and `::after` <a href="/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements">pseudo-elements</a>
Inherited	no
Computed value	as specified
Animation type	discrete

Example

Updating the colors of an external SVG file

In this example the original SVG, on the left, is a square with stroke attribute set with env(--color1, chartreuse) and fill attribute set with env(--color2, darkgreen). The link-parameters property is used to update both of these attributes on the updated square, on the right, with multiple param() CSS functions.

<div class="squares">
  <img
    class="original"
    src="square.svg"
    alt="A square with a chartreuse border and a dark green fill." />
  <img
    class="updated"
    src="square.svg"
    alt="A square with a red border and a tomato fill." />
</div>

.squares {
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
img {
  height: 100%;
}

.updated {
  link-parameters:
    param(--color1, red),
    param(--color2, tomato);
}

Specifications

Specification
CSS Linked Parameters Module Level 1 # propdef-link-parameters

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`link-parameters`	No	No	preview	No	No	No	No	No	No	No	No	No
`none`	No	No	preview	No	No	No	No	No	No	No	No	No