link-parameters CSS property

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

Syntax

css
/* 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

Value not found in DB!

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.

html
<div class="squares">
  <img class="original" src="square.svg" alt="A square with a border." />
  <img class="updated" src="square.svg" alt="A square with a border." />
</div>
css
.updated {
  link-parameters:
    param(--color1, red),
    param(--color2, tomato);
}

Specifications

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

Browser compatibility

See also