link-parameters CSS property

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

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

Initial valuenone
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Computed valueas specified
Animation typediscrete

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 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>
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