CSS-функция `paint()`

paint() — это CSS-функция, которая определяет значение <image>, созданное с помощью PaintWorklet.

Синтаксис

paint(workletName, ...parameters)

где:

workletName

Имя зарегистрированного worklet.

parameters Необязательно

Необязательные дополнительные параметры, передаваемые в paintWorklet

Формальный синтаксис

<paint()> = 
  paint( <ident>, <declaration-value>? )

Примеры

Базовое использование CSS-функции paint()

Пусть у нас есть следующий HTML:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item N</li>
</ul>

В JavaScript регистрируем paint worklet:

CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/boxbg.js",
);

В CSS мы определяем background-image как тип paint() с именем worklet, boxbg, а также с любыми переменными (например, --box-color и --width-subtractor), которые будет использовать worklet:

body {
  font: 1.2em / 1.2 sans-serif;
}
li {
  background-image: paint(boxbg);
  --box-color: hsl(55 90% 60%);
}

li:nth-of-type(3n) {
  --box-color: hsl(155 90% 60%);
  --width-subtractor: 20;
}

li:nth-of-type(3n + 1) {
  --box-color: hsl(255 90% 60%);
  --width-subtractor: 40;
}

CSS-функция paint() с параметрами

В CSS-функцию paint() можно передать необязательные аргументы. В этом примере мы передали два аргумента, которые определяют, будет ли background-image у группы элементов списка filled или иметь stroke контур, а также задают width этого контура:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item N</li>
</ul>

CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);

body {
  font: 1.2em / 1.2 sans-serif;
}

li {
  --box-color: hsl(55 90% 60% / 100%);
  background-image: paint(hollow-highlights, stroke, 2px);
}

li:nth-of-type(3n) {
  --box-color: hsl(155 90% 60% / 100%);
  background-image: paint(hollow-highlights, filled, 3px);
}

li:nth-of-type(3n + 1) {
  --box-color: hsl(255 90% 60% / 100%);
  background-image: paint(hollow-highlights, stroke, 1px);
}

Мы добавили пользовательское свойство в блок селектора, задав boxColor. PaintWorklet может обращаться к пользовательским свойствам.

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

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

См. также

• PaintWorkletGlobalScope
• CSS Painting API
• Использование CSS Painting API
• <image>
• Canvas API