Функция CSS `param()`

param() — это CSS-функция, используемая для установки параметров ссылки. Это можно сделать с помощью CSS-функции link-parameters, во фрагменте URL внешнего ресурса или в <url-modifier> CSS-функции url().

Синтаксис

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

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

Значения

<dashed-ident>

<dashed-ident> — это пользовательская переменная, используемая в качестве идентификатора в CSS-функции env() для обновления значения.

<declaration_value> Необязательно

<declaration_value> — это значение обновляемого атрибута. Если <declaration-value> не указано, оно представляет пустое значение.

Формальное определение

Примеры

Во всех приведённых ниже примерах используется один и тот же файл SVG, атрибуты которого заданы с помощью CSS-функции env().

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

Использование свойства link-parameters

В этом примере атрибуты SVG обновляются с помощью CSS-свойства link-parameters и функции param().

<div class="squares">
  <img
    class="original"
    src="square.svg"
    alt="A square with a chartreuse border and a dark green fill." />
  <img
    class="greyscale"
    src="square.svg"
    alt="A square with a slate grey border and a light grey fill." />
  <img
    class="high-contrast"
    src="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);
  }
}

Передача param() в модификатор URL

В этом примере атрибуты SVG обновляются путём передачи функции param() во фрагмент URL атрибута src HTML-элемента <img>.

<img
  src="square.svg#param(--color1, slategrey)&param(--color2, lightgrey)"
  alt="A square with a slate grey border and a light grey fill."
/>

Использование param() со свойством background-image

В этом примере атрибуты SVG обновляются путём передачи функции param() в тип данных url() CSS-свойства background-image.

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

Спецификации

Совместимость с браузерами

См. также

• link-parameters
• env()