Firefox Tomorrow

css function

`param()` CSS function

View on MDN ↗

The param() CSS function is used to set link parameters. This can be done using the link-parameters CSS function, in the fragment URL of an external resource, or in the <url-modifier> of the url() CSS function.

Syntax

/* a single value */
param(--color, red);

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

Values

  • <dashed-ident>

    • A <dashed-ident>is a user defined variable that is used as an identifier in the env CSS function to update the value.

  • <declaration_value> Optional

    • : A <declaration_value> is the value of the attribute being updated. If the <declaration-value> is omitted, it represents an empty value.

Formal definition

Examples

All of the following examples use the same SVG file, which has attributes set with env CSS function.

<!-- example of the code in the external SVG file -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect
    width="100"
    height="100"
    stroke="env(--color1, chartreuse)"
    stroke-width="10"
    fill="env(--color2, darkgreen)"
   />
</svg>

In this example the SVG attributes are updated with the link-parameters CSS property and param() function.

<div class="squares">
  <img
    class="original"
    src="/firefox/mdn-assets/css/reference/values/param/square.svg"
    alt="A square with a chartreuse border and a dark green fill." />
  <img
    class="greyscale"
    src="/firefox/mdn-assets/css/reference/values/param/square.svg"
    alt="A square with a slate grey border and a light grey fill." />
  <img
    class="high-contrast"
    src="/firefox/mdn-assets/css/reference/values/param/square.svg"
    alt="A square with a fuchsia border and a yellow fill." />
</div>

.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);
  }
}
Interactive exampleOpen the canonical MDN source to run this embedded demo.

Passing param() into URL modifier

In this example the SVG attributes are updated by passing the param() function into the URL fragment of the src attribute of the <img> HTML element.

<img
  src="/firefox/mdn-assets/css/reference/values/param/square.svg"
  alt="A square with a slate grey border and a light grey fill."
/>

Using param() with background-image property

In this example the SVG attributes are updated by passing the param() function into the url() data type of the background-image CSS property.

.foo {
  background-image: url(
    "square.svg"
    param(--color1, slategrey),
    param(--color2, lightgrey)
  );
}

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also