Firefox Tomorrow

css property

`link-parameters` CSS property

View on MDN ↗

Limited availability

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

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="/firefox/mdn-assets/css/reference/properties/link-parameters/square.svg"
    alt="A square with a chartreuse border and a dark green fill." />
  <img
    class="updated"
    src="/firefox/mdn-assets/css/reference/properties/link-parameters/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);
}
Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also